Notifikationer

Markér alle som læst Log ud

lektortl Juniormester

10. januar 2010 - 16:17 Der er 12 kommentarer og
2 løsninger

Udskift et billede med et andet.

Er det muligt at arrangere sig således, at når musen føres hen over et bestemt billedfelt (fx. logo1.jpg) så vil et helt andet felt på samme side (fx. pict0.jpg) erstattes med et andet (fx. pic1.jpg), og når musen fjernes fra logo1.jpg så er det gamle pict0.jpg tilbage igen.?
Hvis musen trykkes i feltet skal pict1.jpg derimod gerne blive stående.?

Synes godt om

Slettet bruger

10. januar 2010 - 16:39 #1

Dette problem kan løses med CSS eller Javascript

Hvis dit billede er indsat som et baggrundsbillede (som netop indsættes vha. CSS), så er det en hover-effekt i CSS, du skal bruge.

Hvis billedet indsættes som alm. billede med <img>-tag'et, kan du bruge java script:

<img src="pict0.jpg" id="billede">

<img
src="logo1.jpg"
onMouseOver="document.getElementById("billede").src='pict1.jpg';"
onMouseOut="document.getElementById("billede").src='pict0.jpg';"
onClick="document.getElementById("billede").src='pict1.jpg';">

// Steeven

Synes godt om

Slettet bruger

10. januar 2010 - 17:57 #2

#1, nej, der skal bruges Javascript under alle omstændigheder. :hover pseudo-klassen virker kun på det element, som musen føres over (og er desuden en uskik at bruge til den slags).

Synes godt om

lektortl Juniormester

11. januar 2010 - 12:17 #3

Til steeven

Jeg har prøvet dit forslag, men det virker ikke.
Jeg er absolut heller ikke et jern til dette her.
Her ser du kildeteksten, som jeg har prøvet med:

<html>
<head>
<title>Præsentationsside</title>
</head>

<body>

<p><font size="5" face="Arial">Her er det!</font></p>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%"><img border="0" src="images/HerBorVi01.jpg" width="640"

height="336" id="billede"></td>
<td width="50%"></td>
</tr>
</table>
</center>
</div>
<p style="text-indent: 0; line-height: 100%; margin: 0"> </p>
<p style="text-indent: 0; line-height: 100%; margin: 0"> </p>
<p style="text-indent: 0; line-height: 100%; margin: 0"><font face="Arial"><img border="0"

src="images/logokk.jpg"

onMouseOver="document.getElementById("billede").src='images/Aladdin01.jpg';"
onMouseOut="document.getElementById("billede").src='images/HerBorVi01.jpg';"
onClick="document.getElementById("billede").src='images/Aladdin01.jpg';"

width="262" height="65"></font></p>

</body>

Er det nemt at se, at der er noget forkert eller at der mangler noget?

Synes godt om

lektortl Juniormester

11. januar 2010 - 15:15 #4

Til steeven

Du skriver, at det er java script.
Skal det markeres, at der kommer java script? (og hvordan gør man evt. det?)

Synes godt om

Slettet bruger

11. januar 2010 - 18:36 #5

Hej Lektortl

Det er Javascript ja - eller rettere: DHTML (Dynamisk HTML, hvor man kan manipulere med indholdet på siden direkte i browseren).

Du skal ikke markere dette med <script>-tag. Du tilføjer blot en hændelse til fx onMouseOver.

Kan du give et link til siden, så jeg/vi kan se, hvad der sker?

// Steeven

Synes godt om

lektortl Juniormester

12. januar 2010 - 09:51 #6

Hej Steeven
Fra http://sfaldet1.cwahi.net er der et skjult link allernederst på siden.
Du kan også gå ind direkte:
http://sfaldet1.cwahi.net/skjult.htm
Uheldigvis plastrer CWahi kildekoden til med en masse ekstra snavl, som jeg vist ikke kan gøre ret meget ved.
vh lektortl

Synes godt om

Slettet bruger

12. januar 2010 - 10:42 #7

#5, Nej, DHTML er bare et overordnet navn for brugen af Javascript og DOM'en til manipulering af siden. Det er Javascript (og DOM).

#6, jeg vil lige prøve at vise en linje, og så om du selv kan så fejlen:

onMouseOver="document.getElementById("billede").src='images/Aladdin01.jpg';"

Synes godt om

lektortl Juniormester

13. januar 2010 - 14:11 #8

En lille observation:
I linjen:
onMouseOver="document.getElementById("billede").src='images/Aladdin01.jpg';"
fordeler farverne om "billede" sig sådan, at det første anførselstegn er blå, og både billede og det sidste anførselstegn er røde.
Det er jeg ikke i stand til helt at fortolke, men jeg kunne forestille mig, at elementet "billede" ikke er kendt. Kan det mon tænkes, at der er fejl i linjen:
<td width="50%"><img border="0" src="images/HerBorVi01.jpg" width="640" height="336" id="billede"></td>
??

vh lektortl

Synes godt om

Slettet bruger

13. januar 2010 - 21:06 #9

Fejlen er, at det andet par dåseøjne, dem rundt om ordet "billede", afslutter tildelingen af onMouseOver. Det er måske lettere at vise sådan:

onMouseOver="document.getElementById("
//onMouseOver er ny "document.getElementById("

billede").src='images/Aladdin01.jpg';"
//???, fejl i koden

Det kan simpelt nok løses ved at udskifte gåseøjnene med apostroffer, da disse virker på samme måde, men ikke afbryder defineringen af onMouseOver.

onMouseOver="document.getElementById('billede').src='images/Aladdin01.jpg';"

Synes godt om

lektortl Juniormester

14. januar 2010 - 15:53 #10

Det virker!!!
Mange tak for hjælpen!!

steeven: var ude med et godt og (næsten) rigtigt svar.
kimsey0: kom med den forløsende rettelse, som fik svaret til at virke.

Kan I ikke begge to smide et svar ind, så vil jeg dele points.

vh lektortl

Synes godt om

Slettet bruger

14. januar 2010 - 23:04 #11

Jeg er glad for at jeg var behjælpelig :)
Her kommer et svar fra mig så du kan dele pointene som du lyster.

Synes godt om

Slettet bruger

15. januar 2010 - 13:12 #12

Undskyld, jeg lavede en fejl i kodelinjerne.
Sådan kan det gå. Men det lykkedes dog til sidst.

Her er et svar

// Steeven

Synes godt om

lektortl Juniormester

19. januar 2010 - 17:26 #13

Der gik noget tid inden pointene kom, men nu er de her.
Mange tak for hjælpen.

Synes godt om

Slettet bruger

19. januar 2010 - 23:23 #14

Selv tak.

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