Søg
Avatar billede matz Nybegynder
01. april 2006 - 14:11 Der er 38 kommentarer og
1 løsning

Mouseover på link og billed kommer frem

Hvordan gør man se når musen kommer over et link at så kommer der et billed frem, ved ik om det er javescript og hvordan koden skulle se ud?

Har lavet et eksempel her: www.playboi.dk/mouseover.jpg
Avatar billede mclemens Nybegynder
02. april 2006 - 09:42 #1
sådan?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
<!--
stitilpics="./";
inactivepic="0.jpg";



function piclnkchg(tmppic){
if(tmppic==0){
  document.getElementById("picchging").src=stitilpics+inactivepic;
}else{
  document.getElementById("picchging").src=stitilpics+tmppic;
}
}

//-->
</script></head>

<body>
<a href="test.html" onmouseover="piclnkchg('1.jpg');" onmouseout="piclnkchg(0);">abc</a><br>

<img src="./0.jpg" id="picchging">

</body></html>
Avatar billede mclemens Nybegynder
02. april 2006 - 09:48 #2
lignende scripts: (ca.)
http://www.eksperten.dk/spm/699824
http://www.eksperten.dk/spm/696795
Avatar billede matz Nybegynder
02. april 2006 - 19:51 #3
Hvorfor er der et billed under tekst i denne kode:

<a href="test.html" onmouseover="piclnkchg('1.jpg');" onmouseout="piclnkchg(0);">abc</a><br>

<img src="./0.jpg" id="picchging">

????
Avatar billede mclemens Nybegynder
02. april 2006 - 20:23 #4
nåh, ok misforstod troede du ville have et billede til at skifte... sorry
Avatar billede matz Nybegynder
02. april 2006 - 20:31 #5
Nej det er rigtig nok.. du kan se den her: www.playboi.dk/test.htm

Men det er bare billedet under tekst... skal det være der??

Og kan man lave billedet mindre det som kommer frem når man tager musen over teksten.
Avatar billede mclemens Nybegynder
02. april 2006 - 20:35 #6
Men det er bare billedet under tekst... skal det være der??>
skal det være usynligt når det ikke er i brug og så dukke frem når man kører hen over teksten?
Avatar billede matz Nybegynder
02. april 2006 - 20:36 #7
ja præcis sådan
Avatar billede mclemens Nybegynder
02. april 2006 - 20:41 #8
hen ala det her ... ret placering for hvor den dukker op (top samt left) eller placer billedet et sted og fjern position:absolute;top: ;left: ; ... det vil med sidste løsning dog kunne betyde at indholdet kan rykke sig når billedet dukker frem

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
<!--
stitilpics="./";
inactivepic="0.jpg";



function piclnkchg(tmppic){
curtmp=document.getElementById("picchging");
if(tmppic==0){
  curtmp.src=stitilpics+inactivepic;
  curtmp.style.display="none";
}else{
  curtmp.src=stitilpics+tmppic;
  curtmp.style.display="block";
}
}

//-->
</script></head>

<body>
<a href="test.html" onmouseover="piclnkchg('1.jpg');" onmouseout="piclnkchg(0);">abc</a><br>



<img src="./0.jpg" id="picchging" style="display:none;position:absolute;left:123;top:200;">
</body></html>
Avatar billede mclemens Nybegynder
02. april 2006 - 20:42 #9
p.s. lækkert nok :P
Avatar billede mclemens Nybegynder
02. april 2006 - 20:47 #10
Og kan man lave billedet mindre det som kommer frem når man tager musen over teksten.>
ja, width og height kan også defineres... hvis det er prøv at nøjes med at sætte ind i style på det "usynlige billede"
height:150px;
Avatar billede mclemens Nybegynder
02. april 2006 - 20:56 #11
hov...
left:123;top:200;"> skiftes til left:123px;top:200px;">
Avatar billede matz Nybegynder
02. april 2006 - 21:01 #12
Jeps det virker fint... Men skal der være så stor afstand når man sætter <br> imellem.

Du kan se her: www.playboi.dk/test.htm
Avatar billede mclemens Nybegynder
02. april 2006 - 21:04 #13
br og alt andet er unødvendigt... kun et usynligt billede er nødvendigt...
Avatar billede mclemens Nybegynder
02. april 2006 - 21:04 #14
samt linksene selvfølgelig :)
Avatar billede mclemens Nybegynder
02. april 2006 - 21:06 #15
pas på med både at definere height og width så risikerer du at babes bliver til "tykke" babes prøv at nøjes med width eller height...
Avatar billede matz Nybegynder
02. april 2006 - 21:07 #16
Godt nok ;) Jeg tænkte på kan man ikke få billedet til at komme frem lige ved siden af linket til højre? billedet kommer frem over i den ene side af skærmen.
Avatar billede mclemens Nybegynder
02. april 2006 - 21:08 #17
du kan jo også skifte p1.jpg for hvert link... derudover kan jeg rette scriptet lidt så du kan definere top og left position i hver href ... f.eks.:

onmouseover="piclnkchg('p1.jpg','123px','200px');"
samt et andet link med
onmouseover="piclnkchg('p2.jpg','226px','200px');"
Avatar billede mclemens Nybegynder
02. april 2006 - 21:08 #18
Godt nok ;) Jeg tænkte på kan man ikke få billedet til at komme frem lige ved siden af linket til højre? billedet kommer frem over i den ene side af skærmen.>
kigger lige på det...
Avatar billede matz Nybegynder
02. april 2006 - 21:14 #19
det ser ik rigtig ud til at virke:

<a href="test.html" onmouseover="piclnkchg('p1.jpg','123px','200px');" onmouseout="piclnkchg(0);">abc</a><br>
<img src="./0.jpg" id="picchging" style="display:none;position:absolute;left:123px;top:200;">
Avatar billede mclemens Nybegynder
02. april 2006 - 21:16 #20
derudover kan jeg ->rette<- scriptet lidt så du kan definere top og left position i hver href ... f.eks.:>
- vil det være bedre?
Avatar billede matz Nybegynder
02. april 2006 - 21:17 #21
Nååh ja havde jeg ikke lige set :) Det ville være godt hvis du kunne det.
Avatar billede mclemens Nybegynder
02. april 2006 - 21:21 #22
ikke testet ...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
stitilpics="./";
inactivepic="0.jpg";



function piclnkchg(tmppic,tmptop,tmpleft){
curtmp=document.getElementById("picchging");
if(tmppic==0){
  curtmp.src=stitilpics+inactivepic;
  curtmp.style.display="none";
}else{
  curtmp.style.top=tmptop;
  curtmp.style.left=tmpleft;
  curtmp.src=stitilpics+tmppic;
  curtmp.style.display="block";
}
}

//-->
</script></head>

<body><center>
<a href="test.html" onmouseover="piclnkchg('p1.jpg','100px','200px');" onmouseout="piclnkchg(0);">abc</a><br>
<a href="test.html" onmouseover="piclnkchg('p1.jpg','100px','400px');" onmouseout="piclnkchg(0);">abc</a><br>

        </center>


<img src="./0.jpg" id="picchging" style="display:none;position:absolute;left:0px;top:0px;height:100px;width:80px;">   
</body>
</html>
Avatar billede matz Nybegynder
02. april 2006 - 21:25 #23
Du kan se det her: www.playboi.dk/test.htm
Avatar billede mclemens Nybegynder
02. april 2006 - 21:29 #24
der er også denne her... placerer billedet afhængig af linkets placering :P

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
<!--
stitilpics="./";
inactivepic="0.jpg";
ryktilhojre=100;
rykned=100;



function piclnkchg(tmppic,tmpcur){

curtmp=document.getElementById("picchging");
if(tmppic==0){
  curtmp.src=stitilpics+inactivepic;
  curtmp.style.display="none";
}else{
  curtmp.style.top=tmpcur.offsetTop+rykned+"px";
  curtmp.style.left=tmpcur.offsetLeft+ryktilhojre+"px";
  curtmp.src=stitilpics+tmppic;
  curtmp.style.display="block";
}
}

//-->
</script></head>

<body><center>
              <a href="test.html" onmouseover="piclnkchg('p1.jpg',this);" onmouseout="piclnkchg(0);">abc</a>
              <a href="test.html" onmouseover="piclnkchg('p1.jpg',this);" onmouseout="piclnkchg(0);">abc</a>

</center>



<img src="./0.jpg" id="picchging" style="display:none;position:absolute;left:0;top:0;height:100px;">
</body></html>
Avatar billede matz Nybegynder
02. april 2006 - 21:34 #25
Jeg tror ik det virker med hvor billedet skal komme frem...der sker intet når man ændre på det:

www.playboi.dk/test.htm
Avatar billede mclemens Nybegynder
02. april 2006 - 21:37 #26
top:200;height:100px;"> <- de defineringer har ingen effekt med sidste løsning kan ligeså godt stå til 0... men, ryktilhojre samt ned definerer hvor det skal dukke frem relativt til linkets placering...
Avatar billede matz Nybegynder
02. april 2006 - 21:42 #27
Det ser ud til at fungere nu... Så mange tak skal du have! lig et svar :)
Avatar billede mclemens Nybegynder
02. april 2006 - 21:43 #28
svar ;)
... nu er der da et par valgmuligheder :D
Avatar billede matz Nybegynder
02. april 2006 - 21:45 #29
jeps ;)
Avatar billede mclemens Nybegynder
02. april 2006 - 21:47 #30
onmouseover samt onmouseout kan nok også flyttes ind i en <div...> (hvori <a href...>tekst</a> er placeret) div'en har så en fast width definering i style så placeringen af billederne ikke ødelægges afhængig af link-tekstens længde :)
Avatar billede mclemens Nybegynder
02. april 2006 - 21:48 #31
- takker for point :)
Avatar billede matz Nybegynder
02. april 2006 - 21:48 #32
Kan du skrive det ind i koden?? ;)
Avatar billede mclemens Nybegynder
02. april 2006 - 21:52 #33
(op i head med denne)
<style type="text/css">
.imgcont{width:200px;}
</style>

... ikke testet :P



<div class="imgcont" onmouseover="piclnkchg('p1.jpg',this);" onmouseout="piclnkchg(0);"><a href="test.html" >abcasdsdsdaasds</a></div>
<br>
<div class="imgcont" onmouseover="piclnkchg('p1.jpg',this);" onmouseout="piclnkchg(0);"><a href="test.html">abc</a></div>
Avatar billede matz Nybegynder
02. april 2006 - 21:54 #34
Der sker intet... Kan man godt sætte en border på billedet?
Avatar billede mclemens Nybegynder
02. april 2006 - 21:54 #35
ryktilhojre skal nok øges :P
Avatar billede mclemens Nybegynder
02. april 2006 - 21:55 #36
prøv:

<img src="./0.jpg" id="picchging" style="display:none;position:absolute;left:0;top:20;height:100px;border:5px solid red;">

flere border indstillinger her:
http://www.w3schools.com/css/css_reference.asp#border
Avatar billede mclemens Nybegynder
02. april 2006 - 21:58 #37
er først på igen imorgen :P
Avatar billede matz Nybegynder
02. april 2006 - 22:00 #38
Ok denne kode her virker styadig ikke:

<style type="text/css">
.imgcont{width:200px;}
</style>

... ikke testet :P



<div class="imgcont" onmouseover="piclnkchg('p1.jpg',this);" onmouseout="piclnkchg(0);"><a href="test.html" >abcasdsdsdaasds</a></div>
<br>
<div class="imgcont" onmouseover="piclnkchg('p1.jpg',this);" onmouseout="piclnkchg(0);"><a href="test.html">abc</a></div>
Avatar billede mclemens Nybegynder
02. april 2006 - 22:22 #39
tilføj denne til din style.css:
.imgcont{width:200px;}


og her: (krydser fingre...)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
stitilpics="./";
inactivepic="0.jpg";
ryktilhojre=200;
rykned=20;



function piclnkchg(tmppic,tmpcur){

curtmp=document.getElementById("picchging");
if(tmppic==0){
  curtmp.src=stitilpics+inactivepic;
  curtmp.style.display="none";
}else{
  curtmp.style.top=tmpcur.offsetTop+rykned+"px";
  curtmp.style.left=tmpcur.offsetLeft+ryktilhojre+"px";
  curtmp.src=stitilpics+tmppic;
  curtmp.style.display="block";
}
}

//-->
</script></head>

<body><center>
<div class="imgcont" onmouseover="piclnkchg('p1.jpg',this);" onmouseout="piclnkchg(0);"><a href="test.html" >abcasdsdsdaasds</a></div>
<br>
<div class="imgcont" onmouseover="piclnkchg('p1.jpg',this);" onmouseout="piclnkchg(0);"><a href="test.html">abc</a></div>
</center>



<img src="./0.jpg" id="picchging" style="display:none;position:absolute;left:0;top:20;height:100px;">

        </center>
           
</body>
</html>
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
1 min siden Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
I dag 09:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
White papers
Flere white papers »