Søg
Avatar billede mik28 Seniormester
23. august 2011 - 14:02 Der er 10 kommentarer og
1 løsning

skift billeder på flere forskellige divs

Hej Eksperter

Jeg ønsker at skrive et script som skifter billeder på nogle divs. Noget i den her stil. Har brug for lidt inspiration

<html>
<body>

<div id="billede1">et billede<div/>
<div id="billede2" onmouseover="skift billed123 til billede 123onmouseover" onmouseout="skift til billede123">et billede<div/>
<div id="billede3">et billede<div/>

</body>
</html>
Avatar billede mik28 Seniormester
23. august 2011 - 14:12 #1
Vil det her i princippet virke?

<html>
<head>
<script>
funktion mouseout(){
document.getElementById("billede1").className="billede1";
document.getElementById("billede2").className="billede2";
document.getElementById("billede3").className="billede3";
}
funktion mouseover(){
document.getElementById("billede1").className="billede1hover";
document.getElementById("billede2").className="billede2hover";
document.getElementById("billede3").className="billede3hover";
}
<body>

<div id="billede1" class="billed1">et billede<div/>
<div id="billede2" class="billed2"onmouseover="mouseover" onmouseout="mouseout">et billede<div/>
<div id="billede3" class="billed3">et billede<div/>

</body>
</html>
Avatar billede mik28 Seniormester
23. august 2011 - 14:29 #2
<html>
<head>
<style>
.billede1{
background-image:url('1.jpg');
}
.billede2{
background-image:url('1.jpg');
}
.billede3{
background-image:url('1.jpg');
}

.billede1hover{
background-image:url('1h.jpg');
}
.billede2hover{
background-image:url('1h.jpg');
}
.billede3hover{
background-image:url('1h.jpg');
}
</style>

<script>
funktion mouseout(){
document.getElementById("billede1").className="billede1";
document.getElementById("billede2").className="billede2";
document.getElementById("billede3").className="billede3";
}
funktion mouseover(){
document.getElementById("billede1").className="billede1hover";
document.getElementById("billede2").className="billede2hover";
document.getElementById("billede3").className="billede3hover";
}
</script>
</head>

<body>

er det tætteste jeg kan komme. Hvad gør jeg forkert?
Avatar billede mik28 Seniormester
23. august 2011 - 14:42 #3
Jeg kan åbenbart ikke stave :-)

<html>
<head>
<style>
.billede1{
background-image:url('1.png');
}
.billede2{
background-image:url('1.png');
}
.billede3{
background-image:url('1.png');
}

.billede1hover{
background-image:url('1h.png');
}
.billede2hover{
background-image:url('1h.png');
}
.billede3hover{
background-image:url('1h.png');
}
</style>

<script>
function mouseout(){
document.getElementById("billede1").className="billede1";
document.getElementById("billede2").className="billede2";
document.getElementById("billede3").className="billede3";
}
function mouseover(){
document.getElementById("billede1").className="billede1hover";
document.getElementById("billede2").className="billede2hover";
document.getElementById("billede3").className="billede3hover";
}
</script>
</head>

<body>

<div id="billede1" class="billede1">TEST</div>
<div id="billede2" class="billede2" onmouseover="mouseover();" onmouseout="mouseout();">TEST</div>
<div id="billede3" class="billede3">TEST</div>

</body>
</html>

blev løsningen. Er der en mere elegant måde at gøre det på?
Avatar billede ggxdg Nybegynder
23. august 2011 - 14:44 #4
funktion: function

du kan vel også bare ændre den via style
Avatar billede ggxdg Nybegynder
23. august 2011 - 14:44 #5
ah... du var lige lidt hurtigere der :P
Avatar billede mik28 Seniormester
23. august 2011 - 14:50 #6
Jeg vil gerne have al styling til at ligge i mit stylesheet. Skulle bare lige teste om det virkede :-)
Avatar billede ggxdg Nybegynder
23. august 2011 - 14:51 #7
onmouseover="this.style.backgroundImage='url(1.png)'"
Avatar billede mik28 Seniormester
23. august 2011 - 15:04 #8
ja men finten er jo at jeg gerne vil skifte 3 billeder på 3 divs
Avatar billede mik28 Seniormester
23. august 2011 - 15:06 #9
tak for input
Avatar billede mik28 Seniormester
01. september 2011 - 10:24 #10
lægger du et svar. Du fik mig jo på sporet
Avatar billede mik28 Seniormester
23. november 2011 - 15:43 #11
Lukker da der ikke er lagt et svar
Avatar billede 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.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 1 03/02/202614:19 03/02/202618:42
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
31/0310:22 Makro der gemmer vedhæftet fil fra Msg og omdøber filen Af lokesa i Excel
30/0313:45 Kablet forbindelse mellem android telefon og windows 11 pc Af 1Dorte i Android
30/0312:04 Elementtype vises - og ikke billedet? Af hkprofil i Billedbehandling
29/0312:08 Problemer med replay af købte kursusvideoer Af annam i Browsere
28/0311:18 DENVER DVB-tMPEG-4 HD TUNER Af ole falsted i Fjernsyn & projektorer
White papers
Flere white papers »