Highlight pictures

D

Drstein99

Junior Contributor
Joined
Sep 26, 2003
Messages
283
Location
Audubon, Nj
I am building an online catalog. For the product picture, I want a thumbnail on the screen, with a click-to-enlarge hyperlink on the bottom. But I want them to click the image too, by signalling they can do that by sorta making the image lighter or some way like that.

How can I highlight an image (that can be resized by proportion to "PX" width or height) when user glides cursor across it on the screen, to appear as if it's clickable?
 
This would best be done with DHTML using JavaScript... There are Alpha channels you can use to change the look of the image when the user hovers over it, but that is browser specific...

What I would suggest is have the image in a TABLE or DIV slightly bigger than the image, so it has a border around it, with the background color set to say, blue. Then you will need to add some javascript to the "OnMouseOver" event to change the background color to red or something...

Go check out www.w3schools.com to learn about DHTML, JavaScript, the HTML DOM and CSS...
 
Are you saying I gotta make two pics and alternate them when the user hovers the pic? I was looking for a function that automatically took the pic, re/rendered it with a higher brightness or something automatically.
 
Drstein99 said:
Are you saying I gotta make two pics and alternate them when the user hovers the pic? I was looking for a function that automatically took the pic, re/rendered it with a higher brightness or something automatically.
Click to expand...

No - not saying that at all. Using javascript alpha channels will dynamically change the ONE image you have on the client side, but this method will only work in certain browsers.

The other option i mentioned was to use CSS and JavaScript to change the border color around the image when hovered over, so again, no aditional image will be needed...
 
Back
Top