Log In · Register

 
 
 Closed TopicStart new topic
rollovers
ryanoman
post Dec 15 2005, 01:47 PM
Post #1


=]
*****

Group: Member
Posts: 712
Joined: May 2004
Member No: 15,626
Is it still possible to create a rollover effect for a certain part of an image? For example, I'd like to rollover effects to the buttons of the navigation part of this layout:
http://www.ryanoman.net/nwq/nwq.php Is it possible? I still have the .PSD.
 
*Libertie*
post Dec 15 2005, 03:25 PM
Post #2





Guest
Yes. I'll give you an example..

Say I use this image as my navigation bar:


And I want each individual portion of the image to be a link that turns light blue when I hover over it. I'll use this image for that:


So basically, you make ALL the rollovers in just one image. So. Now the code.



That code up there tells the browser basically that there will be an image swap when you hover over the image. It doesn't know how yet, just that it will happen.



So that was the actual image swap. Now you're finished with the scripting, so you need to actually position your image. To do this, you need to use absolute positioning to put your images on top of each other:



Change those values as needed, but notice that I defined an image map. That's what will tell the browser which part of the image to change and which part to leave alone, as well as making those parts links. So to finish it up:




Now, if you want to see a preview, here's my full code (with my occasional commentary), just save as an html file and upload it to see the full results:
 
technicolour
post Dec 15 2005, 03:39 PM
Post #3


show me a garden thats bursting to life
********

Group: Staff Alumni
Posts: 12,303
Joined: Mar 2005
Member No: 115,987
Can you get the same effect if you wanted your links to look like this : http://44suburbia.org/ ? (they're on the paper that says like textures patterns etc etc)
 
ryanoman
post Dec 15 2005, 03:54 PM
Post #4


=]
*****

Group: Member
Posts: 712
Joined: May 2004
Member No: 15,626
Thanks libertie! I wish I had seen this before I made my current, simple layout that I'm happy with: http://www.ryanoman.net/ . Thanks for your help, though, and I can always remember this for reference.
 
*Libertie*
post Dec 15 2005, 04:00 PM
Post #5





Guest
Yup.. If the paper was one image, you could position a second one with all the rollover effects on top of it, and then when you do the image mapping use polygons instead of rectangles (if you use the online image mapper at pcoward.com/imagemapper this isn't nearly as confusing).
 
technicolour
post Dec 15 2005, 04:20 PM
Post #6


show me a garden thats bursting to life
********

Group: Staff Alumni
Posts: 12,303
Joined: Mar 2005
Member No: 115,987
^ Why polygons?

But thanks for your help! I need to spice up my sites.
 
*Libertie*
post Dec 15 2005, 04:45 PM
Post #7





Guest
Mm.. Well, the links are kind of at an angle so I figure it'd be more precise if it was mapped that way.. Using the online mapper, you can just pick four (or however many) points around the image and click the first one to close (sorta like the pen tool in photoshop, you're making a path). So that makes your links shapes instead of going straight across and possibly cutting into parts of the image that you don't want to be links.
 
technicolour
post Dec 15 2005, 05:05 PM
Post #8


show me a garden thats bursting to life
********

Group: Staff Alumni
Posts: 12,303
Joined: Mar 2005
Member No: 115,987
^ oooh you make complete sense. I'm not thinking.

But thanks so much for your help! I will most definately work on this after finals tomorrow.
 
« Next Oldest · Graphics Help Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic