Multiple Rollover Image Code |
Multiple Rollover Image Code |
The Heir |
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! |
jimlongo |
Sep 27 2006, 06:24 PM
Post
#2
|
This is My Life Group: Members Posts: 1,128 Joined: 24-August 06 From: t-dot Member No.: 16 |
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. |
pandy |
Sep 27 2006, 07:04 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. If you are comfortable with JavaScript tollovers, this is easy to to the way I originally thought it was done. |
The Heir |
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? |
pandy |
Sep 27 2006, 08:59 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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.
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. |
The Heir |
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. Thanks for your help! |
pandy |
Sep 28 2006, 09:58 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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.
|
Lo-Fi Version | Time is now: 18th April 2024 - 10:06 PM |