SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member fensi88's Avatar
    Join Date
    Feb 2014
    Location
    Beograd
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mouse over the link- get pic?!

    Can someone tell me what I have to write in <head> and what I have to write in <body> to get this: When I mouse over the link for the article (in table) I want to appear small image from that article, and when I do not mouse over the link it appears only link.

    Example:




    In <head> I have this code for the table:


    Code CSS:
    table.gocab
    {
    font-family: sans-serif;;
    font-size:16px;
    color:white;
    border-width: 2px;
    border-color: white;
    border-style: solid;
    width:900px;
    margin:auto;margin-top:40px;
    margin-bottom:20px;
    font-weight: bold;
     
    }
    table.gocab th {
    border-width: 1px;
    padding: 4px;
    border-style: solid;
    border-color: white;
    background-color: green;
    font-style:italic;
    font-family: sans-serif;;
    font-size:16px;
    color:white;text-align:center;
    margin-top:20px;
     
    }
    table.gocab td {
    border-width: 1px;
    padding: 4px;
    width:450px;
    border-style: solid;
    border-color:white;
    background-color: green;
    text-align:left;font-size:16px;color:white;font-weight:bold;
     
    }

    in the body I have table with a lot of <tr> but here I will post code for the one <tr>:


    HTML Code:
    <table class="gocab">
    
    <tr>
    <td><a href="chelseaCLpass.html" >Will Chelsea pass group in the Champions
    
    League?</a></td>
    <td><a href="ao2013.html" >Australian Open 2013: Will Novak Djokovic win the
    
    Australian Open again?</a></td>
    </tr>
    </table>
    The image that have to appear after mouse over link "Will Chelsea pass group in the Champions League?" has this code:

    HTML Code:
    <img class="img" src="chelseanord.jpg" width="350" height="197" title="Chelsea out of Champions League!" />
    The image that have to appear after mouse over link "Australian Open 2013: Will Novak Djokovic win the Australian Open again?" has this code:

    HTML Code:
    <img class="img" src="ndj2013r2p.jpg" title="Novak Djokovic" width="250" height="278" />
    Is this possible to create in css? Thank you so much for your help.
    Last edited by Mittineague; Feb 16, 2014 at 15:43. Reason: reformatting bbcode tags

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,505
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Hi, fensi88. Welcome to the forums.

    I believe you would be better served by using a list instead of a table for these links because you have better control over the position of the image.

    This is the "table" version. Give this a try and see if it behaves the way you wish.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Image Appears on hover - td</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1198481-mouse-over-the-link-get-pic-!
    Thread: mouse over the link- get pic?!
    2014.02.16 16:40
    fensi88
    -->
        <style type="text/css">
    *, *:before, *:after {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
    }
    table.gocab {
        font-family: sans-serif;;
        font-size:16px;
        color:white;
        border-width:2px;
        border-color:white;
        border-style:solid;
        width:600px;
        margin:auto;
        margin-top:40px;
        margin-bottom:20px;
        font-weight:bold;
    }
    .gocab th {
        border-width:1px;
        padding:4px;
        border-style:solid;
        border-color:white;
        background-color:green;
        font-style:italic;
        font-family:sans-serif;
        font-size:16px;
        color:white;
        text-align:center;
        margin-top:20px;
    }
    .gocab td {
        border-width:1px;
        border-style:solid;
        border-color:white;
        background-color:#0f0;
        text-align:left;
        font-size:16px;
        color:white;
        font-weight:bold;
    }
    .gocab img {
        display:none;
        position:absolute;
        background-color:#ddd;   /* missing image background color.  DELETE if not needed. */
        margin-left:325px;
        margin-top:1.25em;
    }
    .gocab td:hover img {
        display:inline-block;
    }
    .gocab a {
        display:inline-block;
        padding:4px;
    }
    .gocab a:link,
    .gocab a:visited {color:blue;text-decoration:none;}
    .gocab td:hover a {text-decoration:underline;}
    .gocab td:active a {color:red;}
    
        </style>
    </head>
    <body>
    
    <table class="gocab">
        <tr>
            <td><a href="chelseaCLpass.html"><img class="img" src="chelseanord.jpg" alt="" width="350" height="197" title="Chelsea out of Champions League!" />Will Chelsea pass group in the Champions League?</a></td>
        </tr>
        <tr>
            <td><a href="ao2013.html"><img class="img" src="ndj2013r2p.jpg" alt="" title="Novak Djokovic" width="250" height="278" />Australian Open 2013: Will Novak Djokovic win the Australian Open again?</a></td>
        </tr>
    </table>
    
    </body>
    </html>
    This is the "list" version. Give this a try and see what you think.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Image Appears on hover - List Items</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1198481-mouse-over-the-link-get-pic-!
    Thread: mouse over the link- get pic?!
    2014.02.16 16:40
    fensi88
    Links in List Items
    
    -->
        <style type="text/css">
    *, *:before, *:after {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
    }
    ul.gocab {
        list-style:none;
        width:600px;
        border:2px solid white;
        color:white;
        font-weight:bold;
        font-family: sans-serif;;
        font-size:16px;
        padding:0;
        margin:40px auto 20px;
    }
    .gocab li {
        border:1px solid white;
        background-color:#0f0;
        color:white;
        font-size:16px;
        font-weight:bold;
        text-align:left;
        position:relative;
    }
    .gocab li.th {
        font-style:italic;
        font-family:sans-serif;
        text-align:center;
        padding:4px;
        margin-top:20px;
    }
    .gocab img {
        display:none;
        position:absolute;
        background-color:#ddd;   /* missing image background color.  DELETE if not needed. */
        right:0;   /* or maybe left:200px */
        top:100%;
        margin-top:-1px;   /* optional */
        z-index:1;
    }
    .gocab li:hover img {
        display:inline-block;
    }
    .gocab a {
        display:inline-block;
        padding:4px;
    }
    .gocab a:link,
    .gocab a:visited {color:blue;text-decoration:none;}
    .gocab li:hover a {text-decoration:underline;}
    .gocab li:active a {color:red;}
    
        </style>
    </head>
    <body>
    
    <ul class="gocab">
        <li>
            <a href="chelseaCLpass.html"><img class="img" src="chelseanord.jpg" alt="" width="350" height="197" title="Chelsea out of Champions League!" />Will Chelsea pass group in the Champions League?</a>
        </li>
        <li>
            <a href="ao2013.html"><img class="img" src="ndj2013r2p.jpg" alt="" title="Novak Djokovic" width="250" height="278" />Australian Open 2013: Will Novak Djokovic win the Australian Open again?</a>
        </li>
    </ul>
    
    </body>
    </html>

  3. #3
    SitePoint Member fensi88's Avatar
    Join Date
    Feb 2014
    Location
    Beograd
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ronpat, I am surprised! You are really expert! Your code works!! I post this question before I get to know this forum exist on 2 other forums, there were more then 100 views but nobody knows to answer, only you!! Thank you so much!

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,505
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Thank you for the feedback, fensi88. I'm glad you are happy with the code.

    You must give yourself lots of credit for giving us very good information to work with. The image and your code worked well together to explain your wishes. Very nicely prepared.

  5. #5
    SitePoint Member fensi88's Avatar
    Join Date
    Feb 2014
    Location
    Beograd
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.
    Yes I post all codes that involved in this creation (only I missed to post code for pic) so when I, and if, get answer to be easy to me to recognize "where is what" because I am not expert for css, I was for html but css is for me more complicated.


Bookmarks

Posting Permissions

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