[AJAX+CSS] mouse effect on links with image display

**apt** · 12-08-2009, 11:55 PM

Hello everyone,

I would like to have code that will produce a displayed image during a mouse over a link.

Here is an image rendering wanted:

http://www.mediafire.com/imageview.p...ey=mimbi3dqmz2

thanks.

**bluewalrus** · 12-09-2009, 12:16 AM

Code:

a.mouseon span img {
visibility:hidden; height:0%;
//can use display:none; also
}
a.mouseon:hover span img {
visibility:visible; height:100%;
//if use display none use display block or inline or block-inline or some other display option here
position:relative;
//adjust where you want it, can use other methods too fixed, absolute float
left:25px;
top:25px;
}

Code:

<a class="mouseon" href="">Link<span><img src="" alt="" /></span></a>

Like this? Didn't test this post back if it doesnt work or you got a question.

**apt** · 12-09-2009, 12:31 AM

like this :

http://lombre.net/tests/tab-verticales/

**bluewalrus** · 12-09-2009, 02:14 AM

Oo okay that's using jquery. Not the best at this and someone else will probably be able to post a better example but. Download jquery here http://jqueryjs.googlecode.com/files...y-1.3.2.min.js put it on your server. Link it in the head and put in the following code.

Code:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#image1").css("display", "none");
	$("#image2").css("display", "none");
	$("#image3").css("display", "none");
$("#link1").click(function(event){
	$("#image1").css("display", "block");
	$("#image2").css("display", "none");
	$("#image3").css("display", "none");});
$("#link2").click(function(event){
	$("#image1").css("display", "none");
	$("#image2").css("display", "block");
	$("#image3").css("display", "none");
});
$("#link3").click(function(){
	$("#image1").css("display", "none");
	$("#image2").css("display", "none");
	$("#image3").css("display", "block");
});
});
</script>
<style type="text/css">
#links {
float:left;
list-style-type:none;
}
#holder {
float:left;
}
#image1 {
float:left;
padding-left:25px;
}
#image2 {
float:left;
padding-left:25px;
}
#image3 {
float:left;
padding-left:25px;
}
</style>

Then in the body put in this

HTML Code:

<div id="holder">
<ul id="links">
<li><a id="link1" href="#">link 1</a></li>
<li><a id="link2" href="#">link 2</a></li>
<li><a id="link3" href="#">link 3</a></li>
</ul>
<div id="image1">
<img src="photo1.png" alt="Figure 1" />
</div>
<div id="image2">
<img src="photo2.jpg" alt="Figure 2" />
</div>
<div id="image3">
<img src="photo3.png" alt="Figure 3" />
</div>
</div>

**apt** · 12-09-2009, 09:40 AM

hi bluewalrus,

If you have another idea lighter than that presented here, I'm interested

Now, if you want to throw a look on the source code of mouse news (it is a bit old), the following:

Code:

<!ENTITY % HTMLspecial PUBLIC "-//W3C//ENTITIES Special//EN//HTML"
	"http://www.w3.org/TR/REC-html40-971218/HTMLspecial.ent"> 
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252-1> 
<script language="JavaScript1.2" type="text/javascript">
<!--
var ns6 = document.getElementById && !document.all
var ie = document.all
function changeto(e, highlightcolor) {
source = ie ? event.srcElement : e.target
if (source.tagName == "TR" || source.tagName == "TABLE" ) return 
while (source.tagName != "TD" && source.tagName != "HTML" ) source = ns6 ? source.parentNode : source.parentElement
if (source.style.backgroundColor != highlightcolor && source.id != "ignore" ) source.style.backgroundColor = highlightcolor
}

function contains_ns6(master, slave) { //check if slave is contained by master 
while (slave.parentNode)
if ((slave = slave.parentNode) == master) return true;
return false;
}

function changeback(e, originalcolor) {
if (ie && (event.fromElement.contains(event.toElement) || source.contains(event.toElement) || source.id == "ignore" ) || source.tagName == "TR" || source.tagName == "TABLE" ) return
else 
if (ns6 && (contains_ns6(source, e.relatedTarget) || source.id == "ignore" )) return if (ie && event.toElement != source || ns6 && e.relatedTarget != source) source.style.backgroundColor = originalcolor
}
-->
</script> 
</head> 
<body> 
<div align="center"> 
<table border="0" cellpadding="0" style="border-collapse: collapse" width="350"> 
<tr> 
<td align="center" width="100%" height="111" valign="top"> 
<style type="text/css"> a { color: blue; text-decoration: none; } a:hover { color : red; text-decoration: none; } div { font-family: verdana; } 
</style> 
<div align="center"> 
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"> 
<tr> 
<td width="150" align="center" valign="top"> 
<p align="center"> 
</p> 
<div id="a" style="display: none;"> 
<p dir="ltr"> 
<table border=0 width=98%> 
<table border=0 width=98%> 
<table border="0" cellpadding="0" style="border-collapse: collapse" width="145" height="110"> 
<tr> <td> 
<p align="center"> 
<a target="_parent" href="news.php?action=view&id=55"> 
<img border="0" src="filemanager.php?action=image&id=<img width=150 height=122 border =0 align=center src=filemanager.php?action=image&id=58 >" width="150" height="122"></a></td> 
</tr> 
</table> 
</p> 
</div> 
<div id="b" style="display: none;"> 
<p dir="ltr"> 
<table border=0 width=98%> 
<table border=0 width=98%> 
<table border="0" cellpadding="0" style="border-collapse: collapse" width="145" height="110"> 
<tr> <td> 
<p align="center"> 
<a target="_parent" href="news.php?action=view&id=51"> 
<img border="0" src="filemanager.php?action=image&id=<img width=150 height=122 border =0 align=center src=filemanager.php?action=image&id=54 >" width="150" height="122"></a></td> 
</tr> 
</table> 
</p> 
</div> 
<div id="c" style="display: none;"> 
<p dir="ltr"> 
<table border=0 width=98%> 
<table border=0 width=98%> 
<table border="0" cellpadding="0" style="border-collapse: collapse" width="145" height="110"> 
<tr> <td> 
<p align="center"> 
<a target="_parent" href="news.php?action=view&id=41"> 
<img border="0" src="filemanager.php?action=image&id=<img width=150 height=122 border =0 align=center src=filemanager.php?action=image&id=43 >" width="150" height="122"></a></td> 
</tr> 
</table> 
</p> 
</div> </td> 
<td align="right"> 
<div align="center"> 
<table border="1" cellpadding="0" style="border-collapse: collapse" width="100%" id="table1" bordercolor="#9DAABF" onmouseover="changeto(event, '2e3b60')" onmouseout="changeback(event, '728cb7')"> 
<tr> 
<style type="text/css"> a { color: blue; text-decoration: none; } a:hover { color: red; text-decoration: none; } div { font-family: verdana; } 
</style> 
<script language="javascript" type="text/javascript">
<!--
var speed = "1";
var i = 1;

function showNews() {
if (i == 1) {
show(a, b, c);
i = 0
}
}

function show(a, b, c) {
a.style.display = '';
b.style.display = 'none';
c.style.display = 'none';

}
setInterval("showNews()", speed * 2000);
-->
</script> 
<td bgcolor="#728cb7" align="center" width="100%" height="40"> 
<p dir="ltr"> 
<table border=0 width=98%> 
<a href="javascript:void(0)" onmousemove="javascript:show(a,b,c)"> 
<font color="#000000"> 
<table border=0 width=98%> 
<div align="center"> 
<table border="0" cellpadding="0" style="border-collapse: collapse" width="96%"> 
<tr> 
<td id="ignore"> 
<font face="Tahoma" style="font-size: 9pt" color="#FFFFFF"> 
<a target="_parent" href="news.php?action=view&id=55"> 
<font color="#FFFFFF">Articles 1 
</font></a> 
</font></td> 
</tr> 
</div> 
</table> 
</font></a> 
</p> </td> 
</tr> 
<tr> 
<tr> 
<td bgcolor="#728cb7" align="center" width="100%" height="40"> 
<p dir="ltr"> 
<table border=0 width=98%> 
<a href="javascript:void(0)" onmousemove="javascript:show(b,c,a)"> 
<font color="#000000"> 
<table border=0 width=98%> 
<div align="center"> 
<table border="0" cellpadding="0" style="border-collapse: collapse" width="96%"> 
<tr> 
<td id="ignore"> 
<font face="Tahoma" style="font-size: 9pt" color="#FFFFFF"> 
<a target="_parent" href="news.php?action=view&id=51"> 
<font color="#FFFFFF">Articles 2 
</font></a> 
</font></td> 
</tr> 
</div> 
</table> 
</font></a> 
</p> </td> 
</tr> 
<tr> 
<td bgcolor="#728cb7" align="center" width="100%" height="40"> 
<p dir="ltr"> 
<table border=0 width=98%> 
<a href="javascript:void(0)" onmousemove="javascript:show(c,a,b)"> 
<font color="#000000"> 
<table border=0 width=98%> 
<div align="center"> 
<table border="0" cellpadding="0" style="border-collapse: collapse" width="96%"> 
<tr> 
<td id="ignore"> 
<font face="Tahoma" style="font-size: 9pt" color="#FFFFFF"> 
<a target="_parent" href="news.php?action=view&id=41"> 
<font color="#FFFFFF">Articles 3 
</font></a> 
</font></td> 
</tr> 
</div> 
</table> 
</font></a> 
</p> </td> 
</tr> 
</div> 
</div> </td> 
</tr> 
</table> 
</div> 
</td> 
</tr> 
</table> 
</div> 
</body> 
</html>

Thread: [AJAX+CSS] mouse effect on links with image display

Thread Tools

Search Thread

[AJAX+CSS] mouse effect on links with image display

Bookmarks

Bookmarks

Posting Permissions