Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

Dhtml istället för Alt-taggen

bruse33

Startad av bruse33,
i Webbutveckling

Rekommendera Poster

bruse33

bruse33

Postad
Postad

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?

Länk till kommentar
Dela på andra webbplatser
Kristianstad

Kristianstad

Postad
Postad

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)

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...