Notifikationer

Markér alle som læst Log ud

passiflora Juniormester

03. november 2007 - 17:03 Der er 22 kommentarer og
1 løsning

Onmouse over bestemt placering

Hej

Lidt mere mouse over.

Når jeg nu spørger er det nok fordi jeg egentlig ikke aner hvad der rent faktisk sker ved mouse over.

Kan jeg få det "andet" billede til at dukke op på en bestemt placering, f.eks. i et div tag?

Søren

Synes godt om

w13 Novice

03. november 2007 - 17:49 #1

Du kan bruge onmouseover til rigtig meget. Attributten onmouseover, onmouseout, onclick, onkeypress, onkeydown, onkeyup, onfocus, onblur, ondblclick, og flere andre (også kaldet "event handlers") bruges til at definere noget javascript, som skal udføres, når eventen sker. Eks. på indsættelse af et billede:
--------------------------------------------
<script type="text/javascript">
function InsertImg(elm,src){
var newElement=document.createElement("img");
newElement.setAttribute("src",src);
elm.appendChild(newElement);
}
function RemoveImg(elm){
elm.removeChild(elm.firstChild);
}
</script>

<img alt="Billede1" src="billede1.gif" onmouseover="InsertImg(document.getElementById('test'),'billede2.bmp')" onmouseout="RemoveImg(document.getElementById('test')">

<div id="test"></div>
----------------------------------------------
Nogenlunde sådan?

Synes godt om

passiflora Juniormester

03. november 2007 - 18:20 #2

Ja det vist en stor verden jeg bevæger mig ind i ...

Det vil så vise billede2 i div test, og div tag'et skal bare stå under ...

Søren

Synes godt om

w13 Novice

03. november 2007 - 18:53 #3

Jeg er ikke med. Skulle billedet ikke være i div-tag'et?

Synes godt om

passiflora Juniormester

03. november 2007 - 20:01 #4

Jo w13, alt fjong ...

Mit hoved forstår blot ikke hvorledes at det bliver placeret i divet.

Hvis nu id'et havde været et billede ...? Havde deet så også spillet ..?

Synes godt om

passiflora Juniormester

03. november 2007 - 20:24 #5

Kan det bygges ind i denher, eller kan linket bygges i din ...

Søren

- - -

<html>

<head>

<script language="JavaScript">

</script>

</head>

<body>

<a href="http://www.spejderi.dk"
onMouseOver="handleOver();return true;"
onMouseOut="handleOut();return true;"
><img name=imgName width=100 height=100 border=1
alt="This image changes when you point at it!"
src="2.jpg"
></a>

</body>

</html>

Synes godt om

passiflora Juniormester

03. november 2007 - 20:51 #6

... bliver der mouseover igen og igen, bliver billedet bare indsat igen og igen under det forrige ...

Synes godt om

passiflora Juniormester

03. november 2007 - 21:51 #7

.. nå linket kom til at virke.

Så mangler jeg bare mouseout!

Synes godt om

w13 Novice

03. november 2007 - 22:13 #8

Det er meget enklere faktisk. Billedet skal bare helst have et id og så må du ikke bruge language="javascript", da det er forældet. I dag bør man bruge type="text/javascript".

Prøv:
------------------------------------------
<html>
<head>
<script type="text/javascript">
img_on=new Image();img_on.setAttribute("src","1.jpg");
img_off=new Image();img_off.setAttribute("src","2.jpg");

function handleOver(){
document.getElementById("imgName").setAttribute("src",img_on.getAttribute("src"));
}

function handleOut(){
document.getElementById("imgName").setAttribute("src",img_off.getAttribute("src"));
}
//-->
</script>
</head>
<body>

<a title="Spejderi.dk" href="http://www.spejderi.dk" onMouseOver="handleOver()" onMouseOut="handleOut()">
<img id="imgName" style="width:100px;height:100px;border-width:0" alt="This image changes when you point at it!" src="2.jpg">
</a>

</body>
</html>

Synes godt om

w13 Novice

03. november 2007 - 22:13 #9

Det er meget mere up-to-date.

Synes godt om

passiflora Juniormester

03. november 2007 - 23:25 #10

... men den placerer bare ikke over billedet i div tag'et ...

Synes godt om

w13 Novice

04. november 2007 - 01:04 #11

Nej, i det sidste eksempel har vi jo ikke nogen div-tag. Dit eksempel er lavet til at ændre stien på billedet i <a>-tag'et af en eller anden grund. Hvad vil du præcist have den til?

Synes godt om

passiflora Juniormester

04. november 2007 - 01:15 #12

Og vi kan ikke sætte et div tag på ...

Jeg har 9 thump i venstre side.
Ved mouse over skal billedet til at vise sig i højre side, helst i et div tag
Jeg har så noget detail information om produktet som vises ved klik på thump billedet. Den information ligger i en database. Måske, hvis jeg kan få det vendt rigtigt, må det gerne fremkomme samtidig med mouse over.

Forståeligt.

Jeg skal vist have flere point sat på løsningen her ...

Synes godt om

w13 Novice

04. november 2007 - 01:20 #13

Så ret <script> til:
-------------------
<script type="text/javascript">
function handleOver(src){
if(!document.getElementById("largeimg").hasChildNodes) document.getElementById("largeimg").appendChild(document.createElement("img"));
document.getElementById("largeimg").firstChild.setAttribute("src",src);
document.getElementById("largeimg).style.display="inline";
}

function handleOut(){
document.getElementById("largeimg").style.display="none"
}
</script>
-------------------
Og så skal du bare have div'en:
-------------------
<div id="largeimg"></div>
-------------------
Og så skal du på onmouseover f.eks. kalde funktionen med handleOver("billede1.gif")

Synes godt om

passiflora Juniormester

04. november 2007 - 10:31 #14

Hmm øv også ...

Har rettet et par pinger ... men stadig ikke ...

Her er hvad jeg har ... sig til når det bliver for meget. Mouse out virker fint ...

<script type="text/javascript">
function handleOver(src){
if(!document.getElementById("largeimg").hasChildNodes) document.getElementById("largeimg").appendChild(document.createElement("img"));
document.getElementById("largeimg").firstChild.setAttribute("src",src);
document.getElementById("largeimg").style.display="inline";
}

function handleOut(){
document.getElementById("largeimg").style.display="none"
}
</script>

- - -

<div id="b2">
<a title="Spejderi.dk" href="http://www.spejderi.dk" onMouseOver="handleOver('produkt/nellike.jpg')" onMouseOut="handleOut()">
<img name=img border=0 src="produkt/small/nellike.jpg">
</a>
</div>
<div id="largeimg">

Synes godt om

passiflora Juniormester

04. november 2007 - 11:13 #15

Jeg har justeret lidt mere ...

... og har lagt siden ud ... http://www.spejderi.dk/bh/index.asp

Det virker næsten nu. 2. 3. og så vidre ... lægger den nyt billede i div ...

Hvorledes mon jeg "killer" det første ...

Synes godt om

w13 Novice

04. november 2007 - 17:51 #16

Brug i stedet:

<script type="text/javascript">
function handleOver(src){
document.getElementById("largeimg").firstChild.setAttribute("src",src);
document.getElementById("largeimg").style.display="inline";
}

function handleOut(){
document.getElementById("largeimg").style.display="none"
}
</script>

Og så læg et tomt img-tag ind i div'en largeimg, altså:

<div id="largeimg"><img></div>

Synes godt om

passiflora Juniormester

04. november 2007 - 21:57 #17

Det virker jo næsten fint.

<img> tag'et gør, at jeg får et rødt kryds.

<div id="largeimg"><img></div> vil jo blive vist ved første dannelse af siden, og på det tidspunkt er <img> tomt ... hmm kan jeg mon tildele den en værdi, et andet billede?

Søren

Synes godt om

w13 Novice

04. november 2007 - 22:01 #18

Så gør sådan:

<div id="largeimg" style="display:none"><img></div>

Så kan det ikke ses. =)

Synes godt om

passiflora Juniormester

04. november 2007 - 22:34 #19

Smukt ...

Hvordan er det så lige jeg tildeler flere point ...

Så vi kan få dig afregnet.

Søren

Synes godt om

w13 Novice

04. november 2007 - 22:49 #20

Det gør du i den blå menu i venstre side. Og jeg opretter et svar! :)

Synes godt om

passiflora Juniormester

04. november 2007 - 23:04 #21

Tak for hjælpen

Synes godt om

passiflora Juniormester

04. november 2007 - 23:08 #22

Og et følge spørgsmål er på vej ...

Synes godt om

w13 Novice

05. november 2007 - 00:56 #23

Og tak for point! =)

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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
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

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