#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Beograd
    Posts
    5
    Rep Power
    0

    Mouse over link-get picture??!!


    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.

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


    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>:


    <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:

    <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:

    <img class="img" src="ndj2013r2p.jpg" title="Novak Djokovic" width="250" height="278" />

    Thank you so much for your help.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    Does this help?

    If you put the image inside the link, and add classes to the link and the image like so:
    Code:
    <table class="gocab">
    
    <tr>
    <td>
       <a href="chelseaCLpass.html" class="hover-link">
          <img class="hidden-img" src="chelseanord.jpg" width="350" height="197" title="Chelsea out of Champions League!" /> 
          Will Chelsea pass group in the Champions League?
       </a>
    </td>
    <td>
       <a href="ao2013.html" class="hover-link">
          <img class="hidden-img" src="ndj2013r2p.jpg" title="Novak Djokovic" width="250" height="278" /> 
          Australian Open 2013: Will Novak Djokovic win the Australian Open again?
       </a>
    </td>
    </tr>
    </table>
    And then CSS to control the image display:
    Code:
    .hidden-img {
        display: none;
    }
    
    .hover-link:hover .hidden-img {
        display: block;
    }
    Does this do what you need?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Beograd
    Posts
    5
    Rep Power
    0
    Hi LindaJeanne and thanks for the answer!
    I like your code, it is very simple/genius, it works, only I would like the pics to appear on the right side of the link, not above,and the high of the td of the table to not to be depend of the image size. I would send you a link to see what I want but forum rulers do to allow me that.

    Greetings,
    Goca
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Beograd
    Posts
    5
    Rep Power
    0
    To see what I want just type in Google:
    ------------
    Koristite nas veb portal za lako pretrazivanje programa na Foks Krajmu za svaki dan
    --------
    and you will get the link of site of TV program and mouse over the text after the time, for example after 6:10 or 13:50 and you will get small pic on the right side...
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    How about this, then?

    I've changed the code from table to list not only because it's generally a better practice for non-tabular data, but also because the position:relative and position:absolute are undefined for table cells.
    Code:
    <ul class="gocab">
        <li class="header-row">
            <div class="header-item">
                Header 1
            </div>
            <div class="header-item">
                Header 2
            </div>
        </li>
        <li class="article-row">
            <div class="article-item">
                <a href="chelseaCLpass.html" class="hover-link">
                    Will Chelsea pass group in the ChampionsLeague?
                    <img class="hidden-image" src="chelseanord.jpg" width="350" height="197" title="Chelsea out of Champions League!" /> 
                </a>
            </div>
            <div class="article-item">
                <a href="ao2013.html" class="hover-link">
                    Australian Open 2013: Will Novak Djokovic win the Australian Open again?
                    <img class="hidden-image" src="ndj2013r2p.jpg" title="Novak Djokovic" width="250" height="278" /> 
                </a>
            </div>
        </li>
    </ul>

    The .article-item div needs to be position:relative, otherwise the position:absolute of the .hidden-image will position relative to the entire page ( or the first ancestral position:absolute/position:relative if it finds one).

    Code:
    .gocab {
        font: bold 16px sans-serif;
        color: white;
        border: 2px solid white;
        width: 900px;
        margin: 40px auto 20px auto;
        
        
        list-style: none;
        padding: 0;
    }
    
    .gocab .header-item {
        border: 1px solid white;
        padding: 4px;
        background-color: green;
        font: italic 16px sans-serif;
        color:white;
        text-align: center;    
        margin-top: 20px;
        
        width: 48%; /* Browsers insert a bit of whitespace in
                               between inline-block items, so we need to 
                               leave room for this */
        display: inline-block;
        margin: 0;
    }
    
    .gocab .article-item {
        border: 1px solid white;
        font: bold 16px;
        color: white;
        background-color: green;
        text-align: left;
        padding: 4px;
        
        width: 48%;
        display: inline-block;
        position: relative;
        margin: 0;
        height: 3em; /* Using ems, if a user increases the
                                font-size, the row height 
                                will also increase */
        vertical-align: top;
    }
    
    .hidden-image {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
    }
    
    .hover-link:hover .hidden-image {
        display: block;
    }
    Edited to add: here's the jsfiddle: http://jsfiddle.net/6jRNa/
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Beograd
    Posts
    5
    Rep Power
    0
    LindaJeanne, CONGRATULATIONS!! You are really expert! That is what I want to get!!
    Thank you so much!!

IMN logo majestic logo threadwatch logo seochat tools logo