How should I make an image link so that when it it hovered over (rolled over) all that is displayed is HTML link? Also how do i have multiple text links which go to different places for 1 image rollover?

e.g. I have an image of a button visable with no text visible at first, then when the user rolls over the image disappears and all that is displayed is 2 <a href="#link">Link</a> which are clickable and have different href="" values. When the user rolls out the image returns and the text hides.

I thought this would be easy, but the more i think about it i'm not sure.

Thanks.

3 answers

2
points
This was chosen as the best answer

The easiest way I can think of is having the text and images pre-populated on the load and then hide the text.

  <div id="image1" class="image">
        <img src="image1" />
        <div class="text">
        <a href="href1">href</a>
        </div>
    </div>
       <div id="image2" class="image">
        <img src="image2" />
        <div class="text">
        <a href="href2">href2</a>
        <a href="href3">href3</a>
        </div>
    </div>

then if you were using jQuery:

<script type="text/ecmascript">
$(document).ready(function(){
    $("div.image .text").hide();

    $("div.image").hover(
    function(e)
    {
        $(this).find("img").hide();
        $(this).find("div.text").show();
    },
    function(e)
    {
        $(this).find("img").show();
        $(this).find("div.text").hide();
    });
});
</script>

I've tested the code quickly, and it may need a bit of cleaning up, as it is a little sensitive on the hover, maybe setting a time out before the event fires would help.

Full code below:

 <!DOCTYPE HTML>
   <html>
   <body>
   <script type="text/ecmascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
   <div id="image1" class="image">
        <img src="image1" />
        <div class="text">
        <a href="href1">href</a>
        </div>
    </div>
       <div id="image2" class="image">
        <img src="image2" />
        <div class="text">
        <a href="href2">href2</a>
        <a href="href3">href3</a>
        </div>
    </div>
    <script type="text/ecmascript">
    $(document).ready(function(){
        $("div.image .text").hide();

        $("div.image").hover(
        function(e)
        {
            $(this).find("img").hide();
            $(this).find("div.text").show();
        },
        function(e)
        {
            $(this).find("img").show();
            $(this).find("div.text").hide();
        });
    });
    </script>
    </body>
    </html>

The main idea behind this is to put the hover event on an element that is constant eg a surrounding div.

Alternatively if you wanted the copy to change on the hover event jQuery has a .html() extension which allows you to completely change the html markup within a element.

Cheers

Answered almost 9 years ago by Luke Duddridge
4
points

You could also use pure CSS and a little trickery:

HTML

<a href="#"><img /><span>Link text</span></a>

CSS:

a span {display: inline;}
a:hover span {display: none;}

a img {display: none;}
a:hover img {display: inline;}

This works best with a little positioning (like overlaying the text over the image and so on). But I've kept the example code to a minimum for clarity, and you take it anywhere from there. You might need to add something a rule like a span:hover {display: inline;} somewhere when you modify the code. Happy hunting!

You might also add some JavaScript trickery to get old browser to dig that solution as IE6 doesn't like the pseudo selector :hover on anything else than links and not ancestral hovering a:hover span neither.

Answered almost 9 years ago by Jens Hedqvist
  • This is close but doesn't do exactly what i wanted. I needed multiple links behind an image and because the a href link is encapsulating the image it only allows for 1 link. ritch0s over 8 years ago
0
points

You can do the text as generated content but you will not be able to insert anchor tags or any other DOM objects that weren't there before in pure CSS.

Answered almost 9 years ago by Nathan Duran