change content with mouseover

[j_jewell]

I want to change the text which appears in the main part of my document when a user's mouse goes over an image, and back to the default when the mouse goes back off.

[gzazJim]

j_jewel,

The easiest way to do this is by using JavaScript and Cascading Style Sheets (aka dHTML). Basically what you do is define 2 styles - one called .changeOn and one called .changeOff (the style names don't matter) and functions that will swap the styles back and forth.

Try the following:



<script>
function rollon() {
if (window.event.srcElement.className == "changeOff") {
window.event.srcElement.className = "changeOn";
}
}

Rollover.onmouseover = rollon;

function rolloff() {
if (window.event.srcElement.className == "changeOn") {
window.event.srcElement.className = "changeOff";
}
}

Rollover.onmouseout = rolloff;
</script>
<style>
.changeOff
{
cursor: hand;
font-family: Arial;
color: #000000
}
.changeOn
{
cursor: hand;
font-family: Arial;
font-style: bold;
color: red
}
</style>


Within your document, set a <div ID=Rollover> tag, so the script will know where to be activated, and set the element that you want to change with:



<div ID=Rollover>
<span class=changeOff>Changeable Element</span>
</div>


I hope this will help! Good Luck!

Jim

[j_jewell]

I appreciate it!!!

[gzazJim]

j_j,

Never a problem, we're here to help.

Good Luck,

Jim

[j_jewell]

where do I specify what I want the specific element to change to and from??

[j_jewell]

The problem I am having, is that I have six images total within the document that I want to be able to access this DHTML function. So, I can't have the same <div id= Rollover> six times, can I?

[gzazJim]

Hi J_j,

What you can do, is create a <DIV ID=RolloverX> tag for each rollover event. Something like this...



<script>
function rollon() {
if (window.event.srcElement.className == "changeOff") {
window.event.srcElement.className = "changeOn";
}
}

Rollover.onmouseover = rollon;
Rollover2.onmouseover = rollon;
.
.
.
RolloverN.onMouseover = rollon;

function rolloff() {
if (window.event.srcElement.className == "changeOn") {
window.event.srcElement.className = "changeOff";
}
}

Rollover.onmouseout = rolloff;
Rollover2.onmouseout = rolloff;
.
.
.
RolloverN.onmouseout = rolloff;

</script>


And from here, you can create <div> tags to reference the various mouseover and mouseout events.



<div id=Rollover>
...some code...
</div>
...more code here...
<div id=Rollover2>
...some more code still...
</div>


One caveat! This way of doing things will require a <div> tag for each <td> of a table. At least I THINK it does!

Good luck and I hope this helped.

Jim

[j_jewell]

After inserting the code, I get the error message:

'Rollover' is undefined

[Vincent Puglia]

Hi,

Could you post the url or code? Undefined usually means you are trying to access something that hasn't been defined -- yet.

Vinny

[j_jewell]

Would the best way to define the element which is changing, just be to make a layer which is only text i.e.:

<div id="Layer1" style="position:absolute; left:81px; top:412px; width:588px; height:407px; z-index:101"><font face="Arial Narrow" size="4" color="ffffff">Whatever text<font></div>

And then another layer on top of that for each on, and control which is seen through the visibility:visible and visibility:hidden functions in association with the given mouseover?

[gzazJim]

Hi again J_j,

Your layer has an ID of "Layer1" - it should be "ID=Rolloverx", where x is 1, 2, 3, etc... You should have one Rollover ID for each <div> tag wherein the function is called. Most likely the "Rollover is undefined" message is a result of the "Rolloverx=etc..." code not being referenced anywhere in your page.

If you could post the URL, we'd be more help - As Vincent suggested.

Thanks!

Jim

[j_jewell]

This message is for Vincent and gzazJim:

By now you two have seen the page I sent you and viewed the source. Do you agree that it is too bulky to post, or would you rather I posted the whole thing?

[j_jewell]

Is there a way to associate more than one mouseover effect with a given image or link?

[j_jewell]

I have two mouseover functions now (one for a drop-down menu and the other for an image rollover) which both need to be invoked simultaneously. Is there a way to do this?

[j_jewell]

Never mind my last two comments, I found an old thread with the same question.

[j_jewell]

This is the current code I am using for my image rollover

function ImgChange(imgNum,imgSrc) {
document.images[imgNum].src = imgSrc;
}

ImgChange(1,'STI-Home Text-WG Locks.jpg');

imgNum is the number of the given image to alter,
imgSrc is the Source for the new image being altered to.

The problem:

I have two images (which are text only). The original image takes up 2 lines of text, the second image takes up three lines of text. Both images were saved in Photoshop with three lines of text in width (so that the rollover would be seamless). However, when the image rolls back to the original, it is stretching out. Is there a way to specify the size of the image for each rollover (or do you have any other suggestions?)

Please Help!!!!

[jonsteele]

Hi J_Jewell

Are your images the same height AND width?

You can use this script I ALWAYS use. It works in NN and IE.

<head>
<script>
Image1= new Image(48,19) //(width,height)
Image1.src="image1.gif"
Image2= new Image(48,19) //(width,height)
Image2.src="image2.gif"
<script>

I usually don't bother with functions and just put the below code in the <a> tag...
onmouseover="document.imagename.src=image1.src" onmouseout="document.imagename.src=image2.src"

If you want to keep your function, maybe utilizing the code in the head part will help you.

Hope it works.

:) Jon.

[j_jewell]

The images are saved in Photoshop with the same height and width, but after the mouseover occurs, the images, which have a line of white space at the bottom, are stretched to fill the extra line for some reason. I implemented your code as follows:

<HEAD>
<script>
Image1= new Image(595,68) //(width,height)
Image1.src="STI-Home Text-Arial.jpg"
Image2= new Image(595,68) //(width,height)
Image2.src="STI-Home Text-WG.jpg"
Image3= new Image(595,68)
Image3.src="STI-Home Text-WG Locks.jpg"
Image4= new Image(595,68)
Image4.src="STI-Home Text-Tabs.jpg"
Image5= new Image(595,45)
Image5.src="STI-Home Text-STI.jpg"
</script>


</HEAD>
<BODY>

<IMG SRC="Web Ready Pics/Comp-WGLocks Logo.jpg" BORDER=0 WIDTH=114 HEIGHT=71 onmouseover="document.STILOGO.src=Image3.src" onmouseout="document.STILOGO.src=Image5.src">
<IMG SRC="Web Ready Pics/Comp-WG Logo.jpg" BORDER=0 WIDTH=152 HEIGHT=71>
<IMG SRC="Web Ready Pics/Comp-Arial Logo.jpg" BORDER=0 WIDTH=125 HEIGHT=71>
<IMG SRC="Web Ready Pics/Comp-TABS Logo.jpg" BORDER=0 WIDTH=86 HEIGHT=71>

<IMG SRC="Web Ready Pics/STI-Home Text-STI.jpg" BORDER=0 WIDTH=595 HEIGHT=68 NAME="STILOGO">

I still have the same problem. Help!!!!Please!!!!!!!!!!

[jonsteele]

You last image is 595 by 45 make it 595 by 68 like the others...

Jon.

[j_jewell]

Sorry, I didn't change the code back before I copied and pasted it, but your suggestion was my first notion. I then tried to shrink it down to force it to fit...neither solution worked.

[jonsteele]

can you post a URL (with the images)...I think it may help...

;)
Jon.