Notifikationer

Markér alle som læst Log ud

dingkee Nybegynder

05. november 2005 - 23:48 Der er 5 kommentarer og
1 løsning

Image rollover / hover

På min side har jeg en lille menu, som er opbrygget i tables...

Således
|Menu1| billed1|
|Menu2| billed2|

Når jeg kører over den tr som Menu 1 er i, skal billed1, ændre sig til billed1_ac

Jeg har fundet en metode i css, men den virker kun hvis jeg holder musen over billedet, jeg vil også gerne have det til at virke hvis jeg f.eks. holder musen over teksten...

Hvordan gør jeg det?

Synes godt om

johan.o Nybegynder

06. november 2005 - 00:09 #1

Det er altid svært når man ikke kan se koden :), men et princip kunne være følgende :

Dit <img> tag skal have et id. F.eks. id="oImg".

Så laver du en onmouseover på det <tr> tag der indeholder din tekst og billede, som ændrer din img.src property.

Således <tr onmouseover="document.GetElementById('oImg').src='billed1_ac.jpg'">

Så burde billedet ændrer sig når musen bevæger sig over den række i tabellen hvor billedet er. Hvis du vil have billedet til at ændre sig tilbage igen når musen bevæges væk fra rækken igen, kan du tilføje noget ala det her til <tr> tag'et :

onmouseout="document.getElementById('oImg').src='billed.jpg'"

Lad os høre om det var nok, hvis ikke så hvis lidt kode :)

Mvh. Johan

Synes godt om

johan.o Nybegynder

06. november 2005 - 00:10 #2

Øh..vis lidt kode :)

Synes godt om

dingkee Nybegynder

06. november 2005 - 12:46 #3

Så kommer der lidt kode :)

<tr class="kategori-tekst">
<td>
<a href="#" class="kategori-tekst">Hvad er??</a>
</td>
<td class="pil">
<a href="#" class="kategori-tekst"> <img src="pil1.gif" class="pil" border="0" alt=""></a>
</td>
</tr>

css koden:

.pil:hover{
background-image: url(pil.gif);
}
---------------

Så det jeg gerne vil have er at når man kører musen hen over hele <tr>, så skal billedet skifte fra pil1.gif til pil.gif

Synes godt om

johan.o Nybegynder

06. november 2005 - 13:16 #4

Jeg tænkte mere ala sådan her :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Test.</title>
<style type="text/css">

table { border: 1px solid black; }
tr { cursor: pointer; }
td { border: 1px solid red; }

</style>
</head>

<body>

<table style="width: 400px; margin: 0 auto;">
<tr onclick="location.href='http://exp.dk'" onmouseover="document.getElementById('oImg').src='pil.gif'" onmouseout="document.getElementById('oImg').src='pil1.gif'">
<td>Noget tekst !</td>
<td><img src="pil1.gif" id="oImg" alt="pic"></td>
</tr>
</table>

</body>
</html>

Er det brugbart ?

Mvh. Johan

Synes godt om

dingkee Nybegynder

06. november 2005 - 13:56 #5

Ja, det var lige sådan jeg havde tænkt mig det...

Mange tak for det...

Svar = point :D

Synes godt om

johan.o Nybegynder

06. november 2005 - 18:11 #6

Det var godt :), jeg kiggede lige lidt mere på mulighederne og fandt frem til følgende alternative løsning.

Fordelen er at du kan tilføje så mange ekstra rækker i tabellen du vil uden at skulle definerer ID='...', fordi scriptet selv finder billedet via cildNodes collectionen. Den eneste ulempe er at billedet altid skal stå i den celle længst til højre i rækken.

Hvis du er intresseret kan du se de spørgsmål jeg har stillet til brugen af childNodes her : http://exp.dk/spm/662250

Mvh. Johan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Test.</title>
<style type="text/css">

table { border: 1px solid black; }
tr { cursor: pointer; }
td { border: 1px solid red; }

</style>
<script type="text/javascript">

function oFunc(oTR, act)
{
for(i=0; i<oTR.childNodes.length; i++) {
if(oTR.childNodes.item(i).tagName=="TD") {
oImg = new Object(oTR.childNodes.item(i).firstChild); } }
act=="in"? oImg.src="pic.jpg":oImg.src="pic1.jpg";
return true;
}

</script>
</head>

<body>

<table style="width: 400px; margin: 0 auto;">
<tr onmouseover="oFunc(this, 'in')" onmouseout="oFunc(this, 'out')">
<td>Noget tekst !</td>
<td><img src="pic1.jpg" alt="oPic"></td>
</tr>
</table>

</body>
</html>

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS