Question about HTML/Mouse Rollover Images

Started by Play_Pretend, Sat 17/01/2009 02:05:42

Previous topic - Next topic

Play_Pretend

Hey all!  I didn't think this belonged in the tech forum since it's non-AGS...

I just started learning HTML a couple weeks ago, and am 75% through building a website for the Strange Visitor team.  I'm having a problem with my menu's mouse rollover images, though.  The buttons change color when the mouse moves over them, and changes back if you move away.  But if you click the button to change to another page, then hit your brower's Back button, the menu button is still color-changed when you return, until you wipe the mouse over it again.  Does anyone know how I can fix this?

Code: ags

<div id="wb_RollOver2" style="position:absolute;left:80px;top:240px;width:79px;height:78px;z-index:2" align="left">
<script language="JavaScript" type="text/javascript">
<!--
RollOver2 = new Image();
RollOver2.src = "http://www.strange-visitor.com/images/GamesRoll.png";
//-->
</script>
<a href="http://www.strange-visitor.com/games">
<img src="http://www.strange-visitor.com/images/Games.png" id="RollOver2" width="79" height="78" alt="" title="" border="0" 
onMouseOver="this.src='http://www.strange-visitor.com/images/GamesRoll.png'" onMouseOut="this.src='http://www.strange-visitor.com/images/Games.png'">
</a>
</div>


Thanks in advance!

monkey0506

This has nothing to do with HTML, it's a JavaScript error, and for the record, JavaScript is the devil. ;)

Darth Mandarb

I have had the same issue many times and the only way I've been able to solve this is by adding an onclick event which changes the image back to it's mouseout state, then loading the page you want it to.  This has worked for me.

Also ... you should use "document.getElementById()"  instead of the "this.src" :)

Hope this works for you!

Ultra Magnus

Here's what's worked for me in the past...

Code: ags

<script language="javascript">
<!--

				if (document.images) {

				image1on = new Image();   image1on.src = "images/button1b.gif";

				image1off = new Image();   image1off.src = "images/button1.gif";

				}

					function imgOn(imgName) {
				if (document.images) {
		document[imgName].src = eval(imgName + "on.src");
							}
				}

					function imgOff(imgName) {
				if (document.images) {
		document[imgName].src = eval(imgName + "off.src");
							}
				}
			// -->
</script>

<a href="home.html"><img src="images/button1.gif" onmouseover="imgOn('image1')" onmouseout="imgOff('image1')" name="image1" border="0"></a>


It's basically the same as yours, but slightly different. See how it works for ye.

I just quickly tested it in FF2 (the site I had it on is no longer live) and when navigating with the "back" button, the mouseover image did stick for as long as the cursor was above the page (i.e. in the address bar area), but reverted as soon as I moved it over any part of the page, not just the image in question.

Also, you don't need to include the site's whole address when doing links and image locations, etc.
If the pics are in a subfolder of the one the page is in (which they ideally should be), then you can just type "images/GamesRoll.png".
I don't mean to sound bitter, cold, or cruel, but I am, so that's how it comes out.

I'm tired of pretending I'm not bitchin', a total frickin' rock star from Mars.

zabnat

I would like to point out that this the old way of doing roll overs. Now they are usually done in pure CSS.

Play_Pretend

Monkey_05_06: Whoops. :)  I've been patchworking stuff together using code from a WYSIWYG editor, Dreamweaver, and tutorials on the web, then trying to understand how it works after it's plugged in.

Darth Mandarb:  Thanks!  I tried plugging in an onClick event for each link on my front page, and it does the trick, although sometimes the buttons still get stuck on the mouseover image.  (If you move the mouse over another button after clicking, but before the page changes, that other button will get stuck, for instance.)  And it seems like the code responds more slowly sometimes?  But this is the result so far:

http://www.strange-visitor.com/

I'm afraid I wasn't sure how to plug in the document.getElementById() command.  :-[

Ultra Magnus:  Thanks too!  I tried plugging in the code you gave, but for some reason it just did what it was doing before, the button staying highlighted even after I'd clicked on it, then come Back from the new page.  Did I alter it incorrectly?

Code: ags

<script language="javascript">
<!--
				if (document.images) {
				image1on = new Image();   image1on.src = "http://www.strange-visitor.com/images/AboutRoll.png";
				image1off = new Image();   image1off.src = "http://www.strange-visitor.com/images/About.png";
				}
					function imgOn(imgName) {
				if (document.images) {
		document[imgName].src = eval(imgName + "on.src");
							}
				}
					function imgOff(imgName) {
				if (document.images) {
		document[imgName].src = eval(imgName + "off.src");
							}
				}
			// -->
</script>
<a href="http://www.strange-visitor.com/about"><img src="http://www.strange-visitor.com/images/About.png" 
onmouseover="imgOn('image1')" onmouseout="imgOff('image1')" name="image1" border="0"></a>


And yeah, heh, I know about the full http address not needing to be in there, but I keep all my repeat images (buttons, logos, etc.) that appear on more than one page (http://www.strange-visitor/games, /contact, /links, etc.) in http://www.strange-visitor.com/images.  I figured it would be easier to change all the pages at once later if I wanted to update the site's look, but please tell me if this is a newbie mistake. :)

Zabnat:  Could you please show me an example of doing it in CSS?

Darth Mandarb

There are a few ways of accomplishing this with CSS.  I am not sure if using the CSS is necessarily better than using the method above.  It just depends on who you ask!

The method I find the most gratifying is using CSS's ability to "clip" images.  I've used only one image and the "hover" state just shows a different part of the same image.  It's pretty trick!  I'm in a hotel room about 1500 miles from home so I don't have the example code to share (or the time right now to re-write it) but if nobody else provides it I'll drop it in here a little later!

Or you could, of course, search Google and you'll find MANY sites explaining how to do it!

Good luck!

TerranRich

I honestly don't know how people can still browse with JavaScript turned off, as a lot of sites use it and there's really no reason to disable it anymore... therefore, I still use JS for rollovers. You can do it with CSS (and I've done it many times), but there's no standard that says the CSS method is preferable.
Status: Trying to come up with some ideas...

Ultra Magnus

#8
Ah, having onclick reverting the images back to the originals seems to have solved it.
It did for me anyway (FireFox 2). Good call, Darth.

Although, the page source is a bitch to navigate so long as you're giving each button it's own script.
If you use the method I posted*, you can just stick the whole script at the top of the page.
That's why there were so many gaps in it; I do "img1on" through to "img12on", then a bit of a gap, then "img1off" to "img12off", etc.

It'll just make editing the page a lot easier for you if it's all in nice neat sections like that, similar to how paragraphs are easier to read than a page of solid text.
I can send you a sample page if you'd like to see what I mean in context (without clogging up this thread with a whole page of code).

Really nice looking site, by the way.


* and just add onclick="imgOff('image1')" to the img properties
I don't mean to sound bitter, cold, or cruel, but I am, so that's how it comes out.

I'm tired of pretending I'm not bitchin', a total frickin' rock star from Mars.

zabnat

I just said it about CSS because I have noticed that this is the way it is most often done nowadays. At least on the sites I've seen. Anyway, here's one way to do it. There are some other ways, but the basic idea is usually the same. One reason this could be better than javascript solution is that you don't need to preload those hover images. On the other hand, javascript solution might have better compatibility in much older browsers.

Play_Pretend

Ultra Magnus:  Thanks for the compliment.  It's my first time ever making a site! :)  Do you mean I should copy out all the code you mentioned, and then just keep pasting it one extra time for each separate button?  (Altering the image names and link, I mean.)

Zabnat:  That method looks really slick!  I'll give that a try later, too.  I need to learn as much as I can about all these methods.  Thanks!

I fixed all the buttons on the site in the meantime so at least they function properly.  But I want this site to work as smoothly as possible, so I really appreciate the advice from all of you.

Now I'm running into problems making custom navigation buttons for my comic in Comicpress, but that would be worth an entire 'nother thread. :)

Ultra Magnus

Quote from: Strange Visitor on Sun 18/01/2009 17:02:20
Do you mean I should copy out all the code you mentioned, and then just keep pasting it one extra time for each separate button?

Not really, no. :)
I'll send you a page so you can see what I mean.
I don't mean to sound bitter, cold, or cruel, but I am, so that's how it comes out.

I'm tired of pretending I'm not bitchin', a total frickin' rock star from Mars.

SMF spam blocked by CleanTalk