SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
-
Jul 16, 2006, 17:59 #1
- Join Date
- Jan 2003
- Location
- Los Angeles, CA
- Posts
- 1,997
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I would like to hover a transparent image over an image ... can get it to work?
Ok. I have an image for each project, and for some projects I have more detailed images of them that I will load into a lightbox. Now, I am looking for a way to incorporate a hover state that overlays a "hover image" that says "click here for more images" when a user mouses over the main image.
Code:<div id="projectImage"><a href="javascript://"><img src="/print-design/image-01.jpg" width="470" height="295" alt="" /></a></div>
Thanks.
-
Jul 16, 2006, 18:40 #2
I think your problem is you are loading the image as an image. If you fixed the width and height of the container element "projectImage" and displayed your image-01.jpg as it's background, you could then make a empty anchor styled to be the same size, which only shows the image on a mouseover.
The CSS:
Code:.projectImage, .projectImage a { display:block; width:470px; height:295px; padding:0px; margin:0px; border:none; text-decoration:none; } .projectImage { background:url(/print-design/image-01.jpg) top left no-repeat; } .projectImage a:hover { background:url(/print-design/mouse_over.png) center no-repeat; }
Code:<div id="projectImage"><a href=""> </a></div>
Oh and the space is there 'just to be sure' the anchor gets rendered in all browsers.
Javascript? Who needs javascript?
-
Jul 16, 2006, 18:50 #3
- Join Date
- Jan 2003
- Location
- Los Angeles, CA
- Posts
- 1,997
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I tried that and it does work, the problem is I will have to set a seperate class and then background image for 15+ projects in the CSS and I don't really want to do that.
The long story is that I have re-written my site to be completely changed by changing stylesheets, so I am looking for a generic way that can be used in several designs without hard coding images that are design elements into the HTML. I would like a hover state for the image hyperlink to be styled one way with an image in one stylesheet and a completely different way in another stylesheet.
I am probably being too ambitious. There is a way that this lightbox script it doing it and I will try to read through the javascript and css to see how they are doing it. Its probably more on the javascript end.
-
Jul 16, 2006, 21:46 #4
- Join Date
- Jan 2003
- Location
- Los Angeles, CA
- Posts
- 1,997
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I've decided to do this for now, which works the way I want it to since I can create different hover images for each project based on the style sheet. I hope someone can come up with a better way using the HTML I posted in my first post.
Code:<div id="projectImage" style="background-image: url(/print-design/image-01.jpg)"><a href="/print-design/large-01.jpg" rel="lightbox[cspgposter]"><img src="/_images/blank.gif" alt="" /></a></div>
Bookmarks