Notifikationer

Markér alle som læst Log ud

13thsky Nybegynder

23. november 2009 - 01:31 Der er 4 kommentarer og
1 løsning

Simpel roll over image effekt

Hej

Jeg vil gerne have et simpelt script til at skifte et billede ud med et andet, når man kører musen over. Altså som et link.

Men jeg vil gerne have det sådan at den javascript funktion jeg kalder får de to billeder med som parametre. Dvs. så jeg kan genbruge javascript funktionen hver gang jeg vil lave en ny knap med roll over effekt.

Synes godt om

Christian_Belgien Novice

23. november 2009 - 06:14 #1

Den klassiske metode, den som man bliver ved med at komme tilbage til hvis man soeger google for rollover images, synes at vaere den du finder her: http://www.htmlcodetutorial.com/images/images_famsupp_59.html

Det er en stor historie. Jeg er ved at kikke paa om det kan goeres enklere. Det vender jeg tilbage med.

Synes godt om

Christian_Belgien Novice

23. november 2009 - 09:12 #2

Ok, her er hvad jeg fandt ud af:

Du laver som saedvanlig en <img> tag med src til det billede du vil vise. Du giver img'en en id. Saa placerer du img'en i en <a> som du giver en onMouseOver metode. Den metode kalder en funktion rulover med to parametre, id'en af img'en og src til det billede der skal skiftes til.

Hvis du vil have det saaledes at billedet skal skifte tilbage til det oprindelige naar musen igen er vaek skal du ogsaa give <a>'en en metode onMouseOut som kalder funktionen rulud.

Hvis du vil have mere end en img med rullebillede saa skal hver img have sin egen id.

Her er en kode der vil goere dette (udskift mine src's med dine egne src's.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="Javascript">

function rulover(imgid, imgsrc)
{
document.getElementById(imgid).src=imgsrc;
}
function rulud(imgid, imgsrc)
{
document.getElementById(imgid).src=imgsrc;
}

</script>
</head>
<body>

<a href=#
onMouseOver="rulover('id1', '/Images/revue3.jpg')"
onMouseOut="rulud('id1', '/Images/revue2.jpg')">
<img src="/Images/revue2.jpg" border=0 id="id1"></a>

<a href=#
onMouseOver="rulover('id2', '/Images/revue5.jpg')"
onMouseOut="rulud('id2', '/Images/revue4.jpg')">
<img src="/Images/revue4.jpg" border=0 id="id2"></a>

</body>
</html>

Synes godt om

13thsky Nybegynder

23. november 2009 - 10:06 #3

Det er bare perfekt! Tak.

Synes godt om

mclemens Nybegynder

23. november 2009 - 12:43 #4

Lige et lille tip, hvis billedet skal bruges som vist her, kan mouseover/out også liggges på billede elementet som her

<a href="#">
<img src="/Images/revue2.jpg" onMouseOver="rul(this, '/Images/revue3.jpg')" onMouseOut="rul(this, '/Images/revue2.jpg')"></a>

og scriptet forkortet til:

<script type="text/javascript">
function rul(elm, imgsrc){
elm.src=imgsrc;
}
</script>

...

Såfremt der er behovet for id selecting kan #2's script forkortes til:

<script type="text/javascript">
function rul(imgid, imgsrc){
document.getElementById(imgid).src=imgsrc;
}
</script>

med kald til funktionen rul på både mouseover og mouseout (der er ikke behov for at skrive den samme funktion to gange til den samme effekt)

Synes godt om

mclemens Nybegynder

23. november 2009 - 12:48 #5

Første del af #4 virker egentlig lidt ulogisk ved nærmere efter tanke, hvis der ikke skal laves andet med billedet kan man jo ligeså godt sige

<a href="#">
<img src="/Images/revue2.jpg" onMouseOver="this.src='/Images/revue3.jpg';" onMouseOut="this.src='/Images/revue2.jpg';"></a>

- og så undvære scriptet.

(eller lave det via :hover på a elementet i css og så skifte bagrunden på a'elementet og dermed springe img elementet over)

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 JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Å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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS