Notifikationer

Markér alle som læst Log ud

free_help Nybegynder

22. september 2005 - 16:38 Der er 7 kommentarer og
1 løsning

når man peger på et billede skifter den billede?!

Hej eksperter.
Kan jeg ikke bede om koden til at når man peger på et billede med musen skifter den til et andet billede?

Synes godt om

xvid Seniormester

22. september 2005 - 16:50 #1

her er det

http://www.javascriptkit.com/javatutors/image2.shtml

Synes godt om

saudoo Nybegynder

22. september 2005 - 18:05 #2

Placer mellem <head> og </head>:

<script type="text/javascript">
function skiftbillede(img_name,img_src) {
document[img_name].src=img_src;
}
</script>

..

Sådan laves et billed der skal skifte ved mouseover:

<a href="side1.htm" onmouseover="skiftbillede('side1','billeder/papirgaarden_04_2.png')" onmouseout="skiftbillede('side1','billeder/papirgaarden_04.png')"><img src="billeder/papirgaarden_04.png" name="side1" style="border: 0px;"/></a>

Altså:
Du siger at hvis musen er over, skal den skifte billedet ud, der har navnet "X". Og det samme omvendt.

Hvilket billede der er tale om, angives med name-atributten i dit img-tag.
Og i din mouseover, det første, hvor der står side1:
onmouseover="skiftbillede('side1','billeder/papirgaarden_04_2.png')"

Synes godt om

saudoo Nybegynder

22. september 2005 - 18:06 #3

Noget jeg har lavet til et skoleprojekt. :)

Du kan se det her:
http://www.humanslair.dk/papirgaarden/

Synes godt om

roenving Novice

25. september 2005 - 00:18 #4

Simplest muligt:

<img src="billede.gif" onmouseover="this.src='billede_over.gif';" onmouseout="this.src='billede.gif';">

-- og hvis du skal bruge det på en hel masse billeder, og derfor godt vil have det mere generisk:

<script type="text/javascript">
function mOver(pic){
pic.src = pic.src.replace(/\.gif$/,"_over.gif");
}
function mOut(pic){
pic.src = pic.src.replace(/_over\.gif$/,".gif");
}
</script>

<img src="billede.gif" onmouseover="mOver(this);" onmouseout="mOut(this);">

Synes godt om

bjoarn Nybegynder

25. september 2005 - 03:09 #5

Hvis man vil optimere load-tiden kan man bruge css-hover-funktionen.
Et eksempel kan være et menupunkt:
Tag fx et billede på 100px*30px. I et billedredigeringsprogram sætter man de to versioner af billedet ind i ét samlet billede på 200px*30px (det billede der skal vises ved onmouseover placeres til højre).

/* HTML */
<li id="billede1"><a href="url">Menupunkt 1</a></li>

/* CSS */
li#billede1{
margin: 0;
padding: 0;
list-style: none;
width: 100px;
height: 30px;
background: url("billede1.jpg") no-repeat top left;
}
li#billede1 a{
text-indent: -1000px; /* så teksten ikke ses, men er tilgængelig for text-braillers, screen-readers o.l.*/
}
li#billede1 a:hover{
background: url("billede1.jpg") no-repeat 0 -100px;
}

Synes godt om

bjoarn Nybegynder

25. september 2005 - 03:12 #6

Ved "optimere load-tiden" mener jeg selvfølgelig den tid der går fra man tager musen over billedet til det nye billede er loadet.
Hvis det skal pre-loades vha script kræver det vist en del ekstra kode. Men i ovenstående tilfælde er billedet allerede loadet når det første billede er der.

Synes godt om

roenving Novice

25. september 2005 - 03:17 #7

Tjah, men så er det vel bare ved første load, man skal vente ?-)

-- hvis ens baggrundsbilleder er så store, at load-tiden betyder noget alvorligt (specielt dem, der udskiftes dynamisk !-), skal man undlade at bruge dem, for så har man principielt et dårligt organiseret web-site !o]

Synes godt om

bjoarn Nybegynder

25. september 2005 - 04:07 #8

ja i disse tider med bredbånd er der næppe mange der mærker det, men jeg husker tydeligt trenden med grafikbaserede menuer førhen, hvor menupunkter lige pludselig forsvandt eller blinkede ved mouseover (især i overgangen mellem to til hinanden liggende billedlinks), altsammen pga diverse script af variabel kvalitet.

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