Results 1 to 7 of 7

Thread: Images and hover

  1. #1
    Join Date
    Dec 2002

    Images and hover

    Hi. I'm not sure if HTML is how this can be done, but here's what I'd like to do. I have 5 images. They are all linked to dif pages. I would like on "hover" over a specific image, the name of that link (the name of the page) to be displayed in a box below. How can i do this?
    Maybe I'm not to good at explaining, so here's a link:


  2. #2
    Join Date
    Nov 2002
    For starters, are you aware that that link of yours triggers a download in some browsers?

    The reason is that the file is sent as mimetype "application/octet-stream".
    That is very very wrong...

    Please fix it (the easiest is probably to put .html at the end of the filename).

    Anyway, the easiest solution is to do this with CSS.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style title="Default" media="screen" type="text/css">

    .imglinks a span {display:none;}
    .imglinks a:hover span {display:block; position:absolute; width:200px; top:200px; left:50%; margin:0 0 0 -100px;}


    <div class="imglinks">
    <a href=""><img 1><span> The name of page1</span></a>
    <a href=""><img 2><span> The name of page2</span></a>
    <a href=""><img 3><span> The name of page3</span></a>
    <a href=""><img 4><span> The name of page4</span></a>
    <a href=""><img 5><span> The name of page5</span></a>


  3. #3
    Join Date
    Nov 2002

    Cool, but ...

    Your example did not work for me in IE 5.5/Windows '98.

  4. #4
    Join Date
    Nov 2002

    Re: Cool, but ...

    Originally posted by gil davis
    Your example did not work for me in IE 5.5/Windows '98.
    Crap sorry, forgot about that IE bug. Thanks for pointing it out.

    The CSS should be like this

    .imglinks a span {display:none;}
    .imglinks a:hover {border-color:lime} /*IE bugfix*/
    .imglinks a:hover span {display:block; position:absolute; width:200px; top:200px; left:50%; margin:0 0 0 -100px;}

    If you don't add a border-color to the a:hover the poup fails to appear. And no, you don't actually need a border... just a color..
    Very logical isn't it

    Anyway, that fixes it in IE 6 (and IE 5.5 IIRC, nag at me it if doesn't, don't feel like rebooting right now to try it out)

  5. #5
    Join Date
    Nov 2002
    You can also do:

    <a href="page.html"><img src="imge.gif" onMouseOver="document.linkdescrip.style.display = 'block';" onMouseOut="document.linkdescrip.style.display = 'none';"></a>

    <span id="linkdescrip" name="linkdescrip" style="display:none;">
    This link is about...

    I'm not sure if that will work. I am not sure if the document.linkdescrip.style would refer to an ID or NAME attribute, so I added both.

  6. #6
    Join Date
    Nov 2002
    It would refer to the name, you use document.getElementById for IDs.

  7. #7
    Join Date
    Dec 2002
    thanks guys, it works perfect.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles