Forum Moderators: open
I am looking for a way/hack to replace the text displayed in the title attribute of <img> by an image.
Say, I want to display the flag of Germany and when someone hovers over it, it's not text that is displayed but the map of Germany.
I obviously started by trying stuff like:
<img src="<?=$flag?>" title="<? print"<img src=$map>"?>">
...but it displays the text <img src=$map> in the title
Do you know if such a hack has been done or is possible?
Thanks!
'Say, I want to display the flag of Germany and when someone hovers
over it, it's not text that is displayed but the map of Germany...'
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css tooltip</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
<!--
body {
background-color:#eef;
}
a.image {
display:block;
width:327px;
height:168px;
border:2px solid #000;
position:relative; /*this is the key*/
left:100px;
top:50px;
background-image:url(http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png);
}
a.image span {
display: none;
}
a.image:hover{
background-color:#fff;
}
a.image:hover span { /*the span will display just on :hover state*/
display:block;
position:absolute;
left:337px;
top:112px;
width:109px;
height:56px;
border:1px solid #000;
background-image:url(http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png);
}
-->
</style>
</head>
<body>
<div>
<a href="#" class="image"><span></span></a>
</div>
</body>
</html>
birdbrain
Robin_reala: I found a great tooltip at www.walterzorn.com. Right now my problem is making it work on certain pages that have CSS...
Apparently there is another problem. It doesn ot seem to work on blogspot sites. Could it be that blogspot blocks javascript scripts? hmmm...
