PDA

View Full Version : [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.php?quickkey=mimbi3dqmz2

thanks.

:)

bluewalrus
12-09-2009, 12:16 AM
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;
}



<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/jquery-1.3.2.min.js put it on your server. Link it in the head and put in the following 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


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


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

:)