Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Multiple Rollover Image Code

Posted by: The Heir Sep 27 2006, 06:16 PM

Hi, I'm hoping that someone can help me with an issue I'm having with a certain code. I simply cannot figure out or find the code that allows for multiple rollovers on a single image, such as what is being used on the header of this site:

http://s9.invisionfree.com/FHP/index.php

I know how to create hotspots {I have Microsoft FrontPage 2003}, but the rollover code is giving me a lot of trouble.

If anyone could offer their assistance, it would be greatly appreciated! Thanks!

Posted by: jimlongo Sep 27 2006, 06:24 PM

QUOTE(The Heir @ Sep 27 2006, 07:16 PM) *

Hi, I'm hoping that someone can help me with an issue I'm having with a certain code. I simply cannot figure out or find the code that allows for multiple rollovers on a single image, such as what is being used on the header of this site:


Figuring it out or doing it by hand is beyond me, I think most people use Photoshop to design rollovers like this. As for finding the code you could always view the source of the Example page you quoted.


Posted by: pandy Sep 27 2006, 07:04 PM

That could be done with ordinary rollovers with the big image as a background. That was what I thought this was until I looked. It's actually CSS. They have an image as background for the whole thing. A bunch of list items containing empty A tags are spread out over it. Then they use the same image as background for the links and move it around. The overlaid background is only visible inside the A element.
http://70.85.240.179/4047/3/upload/p2004279.jpg
It's quite smart, except for the empty A elements that isn't smart at all. sad.gif

If you are comfortable with JavaScript tollovers, this is easy to to the way I originally thought it was done. tongue.gif

Posted by: The Heir Sep 27 2006, 08:45 PM

Thanks jimlongo; I had looked at some similar things on that site before, but I had never found the source information, strangely. <.< Dunno why not. Anyway, hopefully that'll hint at something.

And pandy -- wow, thanks! The only problem I have... is I'm not experienced with any type of rollovers... at all. And JavaScript isn't something I know a whole lot about. Would you mind maybe explaining it a bit more? smile.gif

Posted by: pandy Sep 27 2006, 08:59 PM

The code is in the CSS block in head, but if you don't know CSS it's hard to follow and not the best place to start learning CSS. The best place is http://www.htmlhelp.com/reference/css/. tongue.gif


The simplest example of a JavaScript rollover is this.

CODE
<img src="a.jpg" width="100" height="100" alt="Blah" onmouseover="this.src='b.jpg'" onmouseout="this.src='a.jpg'">


onmouseover="this.src='ab.jpg'" - switches to another image when the mouse pointer is over the image
onmouseout="this.src='aa.jpg'" - switches back to the first image when the mouse pointer leaves the image

If you google "javascipt rollovers tutorial" you'll find more than you will have time to read. happy.gif

Posted by: The Heir Sep 28 2006, 07:48 PM

Alright, thanks! Actually, I designed an InvisionFree layout and had to work and design the CSS, so I'm a little bit experienced in that.

And that code you gave me is similar to the one's I've seen, I just don't understand how to actually get more than one on an image, but I'll probably figure it out with some more searching. tongue.gif

Thanks for your help!

Posted by: pandy Sep 28 2006, 09:58 PM

You use the big image as a background and place the buttons/links on it. There will be only one rollover for each image or link, whichever you choose to use the rollover with.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)