12. februar 2007 - 17:12
Der er
3 kommentarer og
1 løsning
Vis tekst ved hover over link
Hey..
Jeg er ved at lave en hjemmeside..
Der har jeg en mune, hvor jeg godt kunne tænke mig at den viste en teks til de forskellige link når man hovere over linket. Teksten skal jeg selv kunne placere på siden.
Her er koden til min menu:
<div class="menu_pos">
<table width="259px" height="236" cellspacing="0" cellpadding="0">
<tr>
<td class="menuhvad">
</td>
<a class="varm" href="varme.asp">
<td class="menuwarm" onmouseover="this.style.backgroundImage='url(gfx/menu/varm_hover.png)'; this.style.cursor = 'hand'" onmouseout="this.style.backgroundImage='url(gfx/menu/varm.png)';">
</td>
</a>
<a href="food.asp">
<td class="menufood" onmouseover="this.style.backgroundImage='url(gfx/menu/food_hover.png)'; this.style.cursor = 'hand'" onmouseout="this.style.backgroundImage='url(gfx/menu/food.png)';">
</td>
</a>
<a href="samfund.asp">
<td class="menusamfund" onmouseover="this.style.backgroundImage='url(gfx/menu/samfund_hover.png)'; this.style.cursor = 'hand'" onmouseout="this.style.backgroundImage='url(gfx/menu/samfund.png)';">
</td>
</a>
</tr>
</table>
</div>
Håber at der er nogen der kan hjælpe mig...
25. februar 2007 - 17:45
#2
Nej, på billeder er det også title (selvom en ret udbredt browser fejlagtigt også viser alt !-)
-- og ovenstående kode er hamrende ugyldig html-markup, da links ikke må ligge direkte i tr-elementer ...
-- og så er det noget avanceret vrøvl at forsøge at sætte en cursor ved mouseover, da det i forvejen kun er der, den virker, hvis den er sat ...
-- og jeg går ud fra, at du vil have det i et element et andet sted, så prøv f.eks.
<div class="menu_pos">
<table width="259" height="236" cellspacing="0" cellpadding="0">
<tr>
<td class="menuhvad"></td>
<td class="menuwarm" onclick="location.href=varme.asp" style="cursor:pointer;background-image=url(gfx/menu/varm.png);" onmouseover="menuHover(this,'varm',true);" onmouseout="menuHover(this,'varm',false);">varm</td>
<td class="menufood" onclick="location.href=food.asp" style="cursor:pointer;background-image=url(gfx/menu/food.png);" onmouseover="menuHover(this,'food',true);" onmouseout="menuHover(this,'food',false);">food</td>
<td class="menusamfund" onclick="location.href=samfund.asp" style="cursor:pointer;background-image=url(gfx/menu/samfund.png);" onmouseover="menuHover(this,'samfund',true);" onmouseout="menuHover(this,'samfund',false);">samfund</td>
</tr>
</table>
</div>
<div id="visTekst" style="border:1px solid red;width:259px;">Vælg en menu</style>
<script type="text/javascript">
var texts = {
"varm":"Her finder du alt om vores varme menuer",
"food":"Dette er stedet, hvis du ønsker at finde mere om måden vi laver maden på",
"samfund":"Vil du vide mere om vort samfund, så klik på denne menu"
}
function menuHover(elm,menu,act){
document.getElementById("visTekst").firstChild.nodeValue = act ? texts[menu] : "Vælg en menu";
elm.style.backgroundImage = act ? elm.style.backgroundImage.replace(/\.png/, "_hover.png") : elm.style.backgroundImage.replace(/_hover/,"");
}
</script>