mouse overs and images

[gwar2k1]

Hey, this is probabally gonna be a DHTML question but I'll give it a shot in the Javascript forum.

I have an image that is for navigation. It has home etc. written on it. Im using divs to overlap the image in the correct places so when a person clicks within that area, they go to that page.

What I want to happen is this: When you mouse over the div, I want it to display a small image, of the word, which will be "highlighted" (the static image is white, i want the mouse over yellow).
And to top it off, I want the selected link to remain yellow when that page is viewed.

This would be a piece of cake for me if i wasn't trying to not use tables. I could also have used multiple background images, one for each word that's highlighted. But, Im trying not to and I dont want that many images that large.

This probabally doesnt make sence. Sorry. Oh and Im not an absolute beginner to jscript, just... i hardly use it, so I'll probabally be asking simple questions.

Thanks

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

 

[TheConeHead]

are you saying you just want to do a rollover??:

<a href=&quot;#&quot; onmouseover=&quot;image1.src='images/ro_im1.gif'&quot; on mouseout=&quot;image1.src='images/ro_im.gif'&quot;><img name=&quot;image1&quot; src=&quot;some/image.gif&quot;></a>

or image swapping??:

<img name=&quot;image2&quot; src=&quot;some/other/image.gif&quot;>

<a href=&quot;#&quot; onmouseover=&quot;image2.src='images/ro_im1.gif'&quot; on mouseout=&quot;image2.src='some/other/image.gif'&quot;><img name=&quot;image1&quot; src=&quot;some/image.gif&quot;></a>

 

[gwar2k1]

its the rollover yeah. k that was pretty simple lol! I didnt know the imageX.src thingy. i knew the mouseover, mouse out tho... hehe.

But what about keeping an image after the link's been clicked?
The link chnges the whole page: everything on it. The navigation should state which section they are in via a highlight of the word.

~*Gwar3k1*~
&quot;To the pressure, everything's just like: an illusion. I'll be losing you before long...&quot;

 

[TheConeHead]

not sure I understand??

 

[gwar2k1]

Oh and I cant get it to work either


Navigation image remains the same always
-----------------------------
| HOME GAMES ETC |
-----------------------------

When you mouse over a hyperlink:

-----------------------------
| HOME GAMES ETC |
-----------------------------

When you click that hyperlink, it'll remain like its got the mouse over it even if it hasnt. So say you're in &quot;games&quot; and put your mouse over &quot;home&quot;

-----------------------------
| HOME GAMES ETC |
-----------------------------

It should look like that

~*Gwar3k1*~
&quot;To the pressure, everything's just like: an illusion. I'll be losing you before long...&quot;

 

[travismallen]

I think what you're saying is you want the link that leads to the page to the second image when they're on the page. I would just to that in html on the page - change that piece of javascript/link to just an image(or a link with only one image and no mouse over) of the &quot;highlighted&quot; image. I think this is best if you're not working with frames...

-T

 

[TheConeHead]

could that be something you hard code into each page? that might be simplier or are you including the nav? if so, is this a straight html page or are you using asp or something?

 

[travismallen]

If you'd like to try some different mouse over code...

put this in the head:
<script language=&quot;JavaScript&quot;>
<!--

if (document.images) {
image1on = new Image();
image1on.src = &quot;home2.gif&quot;;

image2on = new Image();
image2on.src = &quot;bio2.gif&quot;;

image3on = new Image();
image3on.src = &quot;travism2.gif&quot;;

image4on = new Image();
image4on.src = &quot;works2.gif&quot;;

image5on = new Image();
image5on.src = &quot;links2.gif&quot;;

image1off = new Image();
image1off.src = &quot;home.gif&quot;;

image2off = new Image();
image2off.src = &quot;bio.gif&quot;;

image3off = new Image();
image3off.src = &quot;travism.gif&quot;;

image4off = new Image();
image4off.src = &quot;works.gif&quot;;

image5off = new Image();
image5off.src = &quot;links.gif&quot;;

}

function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments].src = eval(changeImages.arguments[i+1] + &quot;.src&quot;
}
}
}

// -->
</script>

...and this in the body:

<DIV id= &quot;homebutton&quot;><a href=&quot;home.htm&quot; onMouseOver=&quot;changeImages('image1', 'image1on')&quot; onMouseOut=&quot;changeImages('image1', 'image1off')&quot;><img name=&quot;image1&quot; src=&quot;home.gif&quot; alt=&quot;Home&quot; width=75 height=26 border=0></a></DIV>
<DIV id= &quot;biobutton&quot;><a href=&quot;bio.htm&quot; onMouseOver=&quot;changeImages('image2', 'image2on')&quot; onMouseOut=&quot;changeImages('image2', 'image2off')&quot;><img name=&quot;image2&quot; src=&quot;bio.gif&quot; alt=&quot;Bio&quot; width=75 height=26 border=0></a></DIV>
<DIV id= &quot;travismbutton&quot;><a href=&quot;travism.htm&quot; onMouseOver=&quot;changeImages('image3', 'image3on')&quot; onMouseOut=&quot;changeImages('image3', 'image3off')&quot;><img name=&quot;image3&quot; src=&quot;travism.gif&quot; alt=&quot;travism.htm&quot; width=95 height=26 border=0></a></DIV>
<DIV id= &quot;worksbutton&quot;><a href=&quot;works.htm&quot; onMouseOver=&quot;changeImages('image4', 'image4on')&quot; onMouseOut=&quot;changeImages('image4', 'image4off')&quot;><img name=&quot;image4&quot; src=&quot;works.gif&quot; alt=&quot;Works&quot; width=76 height=26 border=0></a></DIV>
<DIV id= &quot;linksbutton&quot;><a href=&quot;links.htm&quot; onMouseOver=&quot;changeImages('image5', 'image5on')&quot; onMouseOut=&quot;changeImages('image5', 'image5off')&quot;><img name=&quot;image5&quot; src=&quot;links.gif&quot; alt=&quot;Links&quot; width=75 height=26 border=0></a></DIV>

just ignore the DIVs. If you want to see it, it's in the source code of my website

http://www.trav-ism.com

 

[gwar2k1]

Im including the nav as a header file.

<!--#include virtual=&quot;header.html&quot; -->

Yes to what travis mallen said about I want the current page to remain highlighted. Seeing as Im including the file, I'd probabally have to use a cookie right?

~*Gwar3k1*~
&quot;To the pressure, everything's just like: an illusion. I'll be losing you before long...&quot;

 

[TheConeHead]

Not sure a cookie would be right... would just have to query the url and based on what page you are on document.write a style into the correct text...

 

[gwar2k1]

but how would i do that? Query the url i mean. and there are gonna be like a *lot* of pages in the same category. IE Games... gives it away hu? lol

So would I need an array? Cause that'll slow my [banner] page down no end. And would have to be constantly added to surely.

I think im gonna have to take the way I know with html and multiple images =(

~*Gwar3k1*~
&quot;To the pressure, everything's just like: an illusion. I'll be losing you before long...&quot;

 

[TheConeHead]

well one way (surely there is probably better, but...) is you could say:

URL =

http://www.yoursite.com/games/index.html?games1

var urlquery = document.location; //gives you the url
var pageN = urlquery.substring(34,40); //string it however you need to get your location

switch (pageN) {
case &quot;games1&quot;:
set the style for the text you need to be yellow
break;
case &quot;games2&quot;:
son on and so on...

you would just need to make sure the url variables (games1) are all the same length....

 

[gwar2k1]

Clever. =D Thanks

~*Gwar3k1*~
&quot;To the pressure, everything's just like: an illusion. I'll be losing you before long...&quot;