The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Multiple Rollover Image Code
The Heir
post Sep 27 2006, 06:16 PM
Post #1





Group: Members
Posts: 3
Joined: 27-September 06
Member No.: 251



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:

Example

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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Sep 27 2006, 06:24 PM
Post #2


This is My Life
*******

Group: Members
Posts: 1,107
Joined: 24-August 06
From: t-dot
Member No.: 16



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.



--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 27 2006, 07:04 PM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,479
Joined: 9-August 06
Member No.: 6



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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
The Heir
post Sep 27 2006, 08:45 PM
Post #4





Group: Members
Posts: 3
Joined: 27-September 06
Member No.: 251



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 27 2006, 08:59 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,479
Joined: 9-August 06
Member No.: 6



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 the beginning. 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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
The Heir
post Sep 28 2006, 07:48 PM
Post #6





Group: Members
Posts: 3
Joined: 27-September 06
Member No.: 251



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 28 2006, 09:58 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,479
Joined: 9-August 06
Member No.: 6



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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 2nd October 2014 - 11:31 AM