Søg
Avatar billede martin_moth Mester
08. november 2007 - 20:10 Der er 16 kommentarer og
1 løsning

Vis tekst OG billede når mus over link : II

En meget venlig sjæl gav mig denne kode, der kan sørge for at der vises noget tekst eet sted, og et billede et andet sted, når musen køres over et link.

Koden er her: http://www.eksperten.dk/spm/804584

Men mer vil have mer.

Kan jeg

1) få den til at vise et billede pr. deafult, og så et andet når musen er over linket.

2) Få funktionen til at tage billednavnet når man kalder den, så man kan lave mange links der viser forskellige billeder på samme side.

Altså, pseudokode:

<a href="www.eksperten.dk" onmouseover=show(billed1.jpg, test, Hello world"> Her er et link </a>

<a href="www.eksperten.dk" onmouseover=show(billed2.jpg, test, Ta-daaaaa"> Her er et andet link </a>



Det må da være simpelt, at lade stien til billedet være en parameter som funktionen tager, og få den til at vise et billede pr. default. Men jeg fatter intet af javascript.

PS: når jeg får svar på dette kan jeg ikke forestille mig at jeg får brug for mere hjælp ;o)
Avatar billede martin_moth Mester
08. november 2007 - 20:12 #1
Kan da godt gengive den oprindelige kode her:

<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="www.eksperten.dk"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="billed1.jpg" >
</body>
</html>
Avatar billede soerenlyn Nybegynder
08. november 2007 - 23:54 #2
Hej.
Jeg har sat det i samme funktion. Du overfører hvilket id billedet har, dens nye src, hvilken textid og dens txt. Når den så skal skifte tilbage igen overfører du bare tom tekst ... Prøv det :)

<html>
<head>
<script type="text/javascript">
function Show(imgid,src,txtid,txt){
    document.getElementById(txtid).innerHTML=txt;
    document.getElementById(imgid).setAttribute("src",src);
}
</script>
</head>
<body>
<a href="www.eksperten.dk"onmouseover="Show('picture','billed3.jpg','test','Hello world')" onmouseout="Show('picture','billed1.jpg','test','')">første link</a>
<br>
<div id="test"></div>
<img id="picture" src="billed1.jpg" >

<a href="www.eksperten.dk"onmouseover="Show('picture2','billed4.jpg','test2','Hello world')" onmouseout="Show('picture2','billed2.jpg','test2','')">første link</a>
<br>
<div id="test2"></div>
<img id="picture2" src="billed2.jpg" >
</body>
</html>
Avatar billede martin_moth Mester
09. november 2007 - 00:39 #3
Det virker, men kun 90% i forhold til hvad jeg ønsker.

Problemet er, at de forskellige billeder skal vises SAMME sted. Dvs. hvis billedhavnet er "hardcoded" ind i <img src="blabla.jpg>, så bliver jeg nødt til at sætte en hel masse <img>'ere ind

Lad os sige jeg har 5 links.

Der skal kun vises ET billede ad gangen på hjemmesiden

Når INGEN links er markeret, skal der vises et standardbillede
Når musen er over et link skal vises et billede, et forskelligt billede for hvert link.

Ligeså med teskten - skal kun vises et sted.
Avatar billede w13 Novice
09. november 2007 - 00:49 #4
Mener du sådan : ?

<html>
<head>
<script type="text/javascript">
defaultpic="billede1.jpg";
function Show(src,txt){
    document.getElementById("text").innerHTML=txt;
    document.getElementById("picture").setAttribute("src",src);
}
function DefaultPic(){
    document.getElementById("text").innerHTML="";
    document.getElementById("picture").setAttribute("src",defaultpic);
}
</script>
</head>
<body>
<a href="www.eksperten.dk" onmouseover="Show('billed3.jpg','Hello world')" onmouseout="DefaultPic()">første link</a><br>
<a href="www.eksperten.dk" onmouseover="Show('billed4.jpg','Hello world igen')" onmouseout="DefaultPic()">første link</a>
<br>
<div id="text"></div>
<img id="picture" src="billed1.jpg" >
<br>
</body>
</html>
Avatar billede martin_moth Mester
09. november 2007 - 01:29 #5
netop - men den kikser, og viser ikke standardbilledet (billed1) igen efter man første gang har ørt over et link
Avatar billede w13 Novice
09. november 2007 - 01:44 #6
Hjælper det at rette:
defaultpic="billede1.jpg";
til:
var defaultpic="billed1.jpg";
Avatar billede roenving Novice
09. november 2007 - 02:09 #7
-- og fuldt kompatibelt bør det vel være:

<script type="text/javascript">
var defaultpic="billed1.jpg";
function Show(src,txt){
    document.getElementById("text").firstChild.nodeValue=txt;
    document.getElementById("picture").setAttribute("src",src);
}
function DefaultPic(){
    document.getElementById("text").firstChild.nodeValue="";
    document.getElementById("picture").setAttribute("src",defaultpic);
}
</script>

...

<a href="www.eksperten.dk" onmouseover="Show('billed3.jpg','Hello world')" onmouseout="DefaultPic()">første link</a><br>
<a href="www.eksperten.dk" onmouseover="Show('billed4.jpg','Hello world igen')" onmouseout="DefaultPic()">andet link</a>
<br>
<div id="text">&nbsp;</div>
<img id="picture" src="billed1.jpg">
Avatar billede w13 Novice
09. november 2007 - 02:43 #8
Roenving>> Det er vist, fordi Martin_Moth vil have mulighed for f.eks. at indsætte "Hello<br>world" - og så var det umiddelbart lettest at løse med den invalide innerHTML. =)
Avatar billede martin_moth Mester
09. november 2007 - 02:49 #9
w13 01:44:13 - nej, det hjælper ikke :o(
Første gang der er blevet vist et billede ved mouse-over kan default-billedet ikke vises igen. Men nu vil jeg i seng :o)
Avatar billede w13 Novice
09. november 2007 - 14:55 #10
Og har du rettet: var defaultpic="billed1.jpg"; til det rigtige billede? Jeg afprøver koden på min pc lige nu, og den virker perfekt. Ellers må du smide et link til din side, så vi selv kan se det.
Avatar billede martin_moth Mester
09. november 2007 - 15:22 #11
http://martin.moth-lund.dk/upload/test.html
Avatar billede w13 Novice
09. november 2007 - 15:26 #12
Ja, fejlen er enkel.

Du har linjet: var defaultpic="billede1.jpg";
Men ikke noget billede hedder "billede1.jpg". Det hedder "billed1.jpg". Så det skal du bare skrive i stedet.
Avatar billede soerenlyn Nybegynder
09. november 2007 - 15:30 #13
Ja du skal huske at erstatte src'erne med de billeder du har :)
Avatar billede martin_moth Mester
09. november 2007 - 15:46 #14
Pinligt. Sorry. Smid svar
Avatar billede w13 Novice
09. november 2007 - 16:29 #15
De må gå til Soerenlyn allesammen. =)
Avatar billede soerenlyn Nybegynder
09. november 2007 - 17:04 #16
Tak w13, jeg lægger hvert fald et svar :)
Avatar billede soerenlyn Nybegynder
10. november 2007 - 15:38 #17
Og takker for point :)
Avatar billede 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.

Loading billede Opret Preview
Kategori
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 13:36 godt råd søges Alternativ styresystem på Mac pc Af luffe1955 i Andre styresystemer
I går 11:32 Hjælp til kontrol af sygefravær Af Maja i Excel
27/0113:59 2 skærme til en stationær computer Af BIRGER i Skærme
26/0119:26 Opstart af ny computer Af Bent i Windows
25/0120:06 Hjemmeside der virker både på mobil og computer Af Strawberry i PHP
White papers
Flere white papers »