Just nu i M3-nätverket
Jump to content

Dhtml istället för Alt-taggen


bruse33

Recommended Posts

När man för musen över en bild, så får man (i IE) en gul ruta med texten som man angett i alt-taggen.

 

Men jag skulle vilja få texten i en såndäringa ruta istället, där jag kan styra färg, typsnitt osv. Många sajter ahr det, men jag vågar ju inte planka kdoen rakt av.

 

Är det någon som har ett bra tips på en bra å enkel kod?

Link to comment
Share on other sites

Här är koden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jojoxx.net DHTML</title>
<link rel=stylesheet href="/style.css" type="text/css">
<style type="text/css">
</style>
</head>
<body bgcolor="#ffffff" link="#FFaF00" vlink="#ff6f00" alink="#ff0000" text="#333333">
<br>
<div align="center">
<img src="/images/title_dhtml.gif" width=350 height=75 alt="DHTML" border=0>

<h4>Exempel</h4>
<table border="0" cellpadding="0" cellspacing="0"><tr><td width="600">
<!-- Här börjar exemplet -->
<span id="jxtooltip" style="position:absolute; visibility:hidden;"></span>
<br>
<br>
<a href="http://www.jojoxx.net" onMouseover="tooltip('Besök Jojoxx.net');" onMouseout="tooltip();">Jojoxx.net</a>
<script language="JavaScript">
var Xmouse, Ymouse;
var hidden = true;
var preMessage="<table border=0><tr><td bgcolor='#ffffaa'>";
var postMessage="</td></tr></table>";
function tooltip(message) {
if(message){
hidden = false;
if (document.layers){
with (document["jxtooltip"].document){
open();
write(preMessage + message + postMessage);
close();
}
} else if (document.all) {
document.all["jxtooltip"].innerHTML = preMessage + message + postMessage;
} else if (document.getElementById){
jxdocrange = document.createRange();
jxdocrange.setStartBefore(document.getElementById("jxtooltip"));
while (document.getElementById("jxtooltip").hasChildNodes()){
document.getElementById("jxtooltip").removeChild(document.getElementById("jxtooltip").lastChild);
}
document.getElementById("jxtooltip").appendChild(jxdocrange.createContextualFragment(preMessage + message + postMessage));
}
if (document.all) {
document.all["jxtooltip"].style.visibility = "visible";
} else if (document.layers){
document.layers["jxtooltip"].visibility = "show";
} else if (document.getElementById){
document.getElementById("jxtooltip").style.visibility = "visible";
}
} else {
hidden = true;
if (document.all) {
document.all["jxtooltip"].style.visibility = "hidden";
} else if (document.layers){
document.layers["jxtooltip"].visibility = "hide";
} else if (document.getElementById){
document.getElementById("jxtooltip").style.visibility = "hidden";
}
}
}
function MoveHandler(evnt) {
if(document.all) {
Xmouse = window.event.x + document.body.scrollLeft;
Ymouse = window.event.y + document.body.scrollTop;
} else if(document.layers||document.getElementById){
Xmouse = evnt.pageX;
Ymouse = evnt.pageY;
}
moveLayer("jxtooltip",Xmouse-30,Ymouse+18);
}
function moveLayer(Id,x,y){
if (document.all){
document.all[id].style.left = x;
document.all[id].style.top = y;
} else if (document.layers){
document.layers[id].left = x;
document.layers[id].top = y;
} else if (document.getElementById){
document.getElementById(Id).style.left = x+'px';
document.getElementById(Id).style.top = y+'px';
}
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = MoveHandler;
</script>
<!-- Här slutar exemplet -->
</td></tr></table>

</div>
</body>
</html>

 

(hämtat ifrån http://www.jojoxx.net/dhtml/examples/tooltip.html)

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...