Notifikationer

Markér alle som læst Log ud

martin_moth Mester

06. november 2007 - 14:55 Der er 26 kommentarer og
1 løsning

Vis tekst OG billede når mus over link

Hej - jeg fik en til at lave nedenstående for mig, der viser noget tekst et eller andet sted jeg nu vælger, når musen køres over et bestemt link.

Nu vil jeg gerne udvide og have den til at vise teksten eet sted, og et billede et andet sted.

Det burde være nemt at rette til, men trods det er det ikke lykkedes mig :o(

<html>
<head>
<script type="text/javascript">
function ShowText(id,txt){
id=document.getElementById(id);
id.innerHTML=txt;
id.style.display="inline";
}
function HideText(id){
id=document.getElementById(id);
id.style.display="none";
}
</script>
</head>
<body>
<a href="#" onmouseover="ShowText('test','Hello world')" onmouseout="HideText('test')">første link</a>
<a href="#" onmouseover="ShowText('test','Linie 1 <br> Linie 2')" onmouseout="HideText('test')">andet link</a>
<br>
<div id="test" style="display:none"></div>
</body>
</html>

Synes godt om

soerenlyn Nybegynder

06. november 2007 - 15:14 #1

PRøv dette:

<html>
<head>
<script type="text/javascript">
function ShowText(id,txt){
id=document.getElementById(id);
id.innerHTML=txt;
id.style.display="inline";
}
function ShowText(id){
document.getElementById(id).style.display="inline";
}
function HideText(id){
id=document.getElementById(id);
id.style.display="none";
}
</script>
</head>
<body>
<a href="java script:void(0);" onmouseover="ShowText('test','Hello world')" onmouseout="HideText('test')">første link</a>
<a href="java script:void(0);" onmouseover="ShowText('test','Linie 1 <br> Linie 2')" onmouseout="HideText('test')">andet link</a>
<a href="java script:void(0);" onmouseover="ShowImg('picture')" onmouseout="HideText('picture')">vis billede</a>
<br>
<div id="test" style="display:none"></div>
<img src="...." id="picture" style="display:none">
</body>
</html>

Synes godt om

soerenlyn Nybegynder

06. november 2007 - 15:15 #2

Hov .. den nye skal selvfølgelig hedde ShowImg og ikke ShowText

Synes godt om

soerenlyn Nybegynder

06. november 2007 - 15:16 #3

Derudover er innerHTML ikke validt, så du burde skifte ud:

id.innerHTML=txt;
med:
id.appendChild(document.createTextNode(txt));

Og når det så ikke skal vises igen så tilføje linjen:

id.removeChild(id.firstChild)

Synes godt om

roenving Novice

06. november 2007 - 15:48 #4

Hrm, en textnde, der indeholder et linjeskift ...

Synes godt om

soerenlyn Nybegynder

06. november 2007 - 15:59 #5

havde ikke set linjeskiftet :P

Synes godt om

martin_moth Mester

07. november 2007 - 07:59 #6

Ja, men det er ikke præcis det jeg spørger om.

Når musen køres over et link, skal den til at vise teksten eet sted, og et billede et andet sted.

Det du/ I har lavet er bare 2 links der kun viser tekst, og et link der kun viser et billede.

Kan man ikke kalde 2 funktioner på een gang i en onmouseover-event?

Synes godt om

soerenlyn Nybegynder

07. november 2007 - 10:25 #7

Jo det kan du sagtens ... og du kan også putte det sammen i én funktion.

Synes godt om

soerenlyn Nybegynder

07. november 2007 - 10:26 #8

<html>
<head>
<script type="text/javascript">
function ShowText(img,id,txt){
id=document.getElementById(id);
id.innerHTML=txt;
id.style.display="inline";
document.getElementById(img).style.display="inline";
}
function HideText(id){
id=document.getElementById(id);
id.style.display="none";
}
</script>
</head>
<body>
<a href="java script:void(0);" onmouseover="ShowText('test','Hello world')" onmouseout="HideText('test')">første link</a>
<a href="java script:void(0);" onmouseover="ShowText('test','Linie 1 <br> Linie 2')" onmouseout="HideText('test')">andet link</a>
<a href="java script:void(0);" onmouseover="ShowImg('picture')" onmouseout="HideText('picture')">vis billede</a>
<br>
<div id="test" style="display:none"></div>
<img src="...." id="picture" style="display:none">
</body>
</html>

Synes godt om

martin_moth Mester

07. november 2007 - 10:45 #9

Hmm. Så vidt jeg kan se har du stadig bare links, der ENTEN viser et stykke tekst ELLER viser et billede?

Jeg kan ikke få koden til at virke, så jeg kan ikke teste.

Som sagt: ønsker et når musen er over et link, så skal der BÅDE vises noget tekst et sted, OG et billede vises et andet sted.

Synes godt om

soerenlyn Nybegynder

07. november 2007 - 11:19 #10

<html>
<head>
<script type="text/javascript">
function ShowText(img,id,txt){
id=document.getElementById(id);
id.innerHTML=txt;
id.style.display="inline";
img.style.display="inline";
}
function Hide(img,id){
id.style.display="none";
img.style.display="none";
}
</script>
</head>
<body>
<a href="java script:void(0);" onmouseover="Show('picture','test','Hello world')" onmouseout="Hide('picture','test')">første link</a>
<br>
<div id="test" style="display:none"></div>
<img id="picture" style="display:none" src="...." >
</body>
</html>

Synes godt om

martin_moth Mester

07. november 2007 - 16:08 #11

kan du få det til at virke?
Virker ikke hos mig, kan ikke engang få vist teksten

Synes godt om

soerenlyn Nybegynder

07. november 2007 - 16:11 #12

Hov, jeg sover :

<html>
<head>
<script type="text/javascript">
function Show(img,id,txt){
id=document.getElementById(id);
id.innerHTML=txt;
id.style.display="inline";
img.style.display="inline";
}
function Hide(img,id){
id.style.display="none";
img.style.display="none";
}
</script>
</head>
<body>
<a href="java script:void(0);" onmouseover="Show('picture','test','Hello world')" onmouseout="Hide('picture','test')">første link</a>
<br>
<div id="test" style="display:none"></div>
<img id="picture" style="display:none" src="...." >
</body>
</html>

Synes godt om

soerenlyn Nybegynder

07. november 2007 - 16:14 #13

og så skal img i funktionerne lige rettes til document.getElementById(img)

Synes godt om

soerenlyn Nybegynder

07. november 2007 - 16:15 #14

og selvfølgelig document.getElementById(id) i stedet for id i Hide-funktionen .... Gal hvor jeg kører rundt i det !!

Synes godt om

martin_moth Mester

07. november 2007 - 16:42 #15

så alt i alt:

Synes godt om

soerenlyn Nybegynder

07. november 2007 - 16:50 #16

<html>
<head>
<script type="text/javascript">
function Show(img,id,txt){
id=document.getElementById(id);
id.innerHTML=txt;
id.style.display="inline";
document.getElementById(img).style.display="inline";
}
function Hide(img,id){
document.getElementById(id).style.display="none";
document.getElementById(img).style.display="none";
}
</script>
</head>
<body>
<a href="java script:void(0);" onmouseover="Show('picture','test','Hello world')" onmouseout="Hide('picture','test')">første link</a>
<br>
<div id="test" style="display:none"></div>
<img id="picture" style="display:none" src="...." >
</body>
</html>

Synes godt om

martin_moth Mester

07. november 2007 - 21:22 #17

smid et svar og få dine points :o)

Synes godt om

martin_moth Mester

07. november 2007 - 21:26 #18

hvor sætter man URL'en for linket?

Synes godt om

soerenlyn Nybegynder

07. november 2007 - 22:05 #19

Det var også på tide det virkede :P

Hvad mener du med url'en til linket ?

Synes godt om

w13 Novice

07. november 2007 - 22:07 #20

Ja, hvilket link?

Synes godt om

martin_moth Mester

07. november 2007 - 23:12 #21

prøv at læse de første 3 linier i spørgsmålet

Synes godt om

soerenlyn Nybegynder

07. november 2007 - 23:32 #22

Okay .... Jeg troede ikke at linket skulle bruges som et link på den måde, i og med at du selv havde opgivet href="#" i din kode ... Du skriver det bare i attributen href, hvor jeg nu har skrevet java script:void(0). Dette erstatter du bare ..

Synes godt om

w13 Novice

07. november 2007 - 23:43 #23

Ja men du skriver det jo i href som med et helt normalt link, som Soerenlyn siger..

Synes godt om

martin_moth Mester

07. november 2007 - 23:59 #24

troede at java script:void(0) var en del af løsningen.

Fuck jeg fatter lidt af javascript.

Takker. Skal w13 have pts?

Jeg afsætter lidt flere som tak for ekstra ihærdig hjælp!

:o)

Synes godt om

w13 Novice

08. november 2007 - 00:11 #25

Nej, Soerenlyn skal have pointene, når du ved, om alt virker :)

Synes godt om

martin_moth Mester

08. november 2007 - 08:13 #26

Jeg satte op til 200 da der jo var en del skriverier frem og tilbage. Alt virker som det skal nu!
Tak for hjælpen

Synes godt om

soerenlyn Nybegynder

08. november 2007 - 19:11 #27

Og tak for point :)

Hvis jeg ikke havde sovet kunne det have virket efter mit første svar, så den tager jeg på min frakke ..

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