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