Mouseover på link og billed kommer frem

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>

lignende scripts: (ca.)
http://www.eksperten.dk/spm/699824
http://www.eksperten.dk/spm/696795

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">

????

nåh, ok misforstod troede du ville have et billede til at skifte... sorry

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.

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?

ja præcis sådan

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>

p.s. lækkert nok :P

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;

hov...
left:123;top:200;"> skiftes til left:123px;top:200px;">

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

br og alt andet er unødvendigt... kun et usynligt billede er nødvendigt...

samt linksene selvfølgelig :)

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...

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.

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');"

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...

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;">

derudover kan jeg ->rette<- scriptet lidt så du kan definere top og left position i hver href ... f.eks.:>
- vil det være bedre?

Nååh ja havde jeg ikke lige set :) Det ville være godt hvis du kunne det.

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>

Du kan se det her: www.playboi.dk/test.htm

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>

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

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...

Det ser ud til at fungere nu... Så mange tak skal du have! lig et svar :)

svar ;)
... nu er der da et par valgmuligheder :D

jeps ;)

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 :)

- takker for point :)

Kan du skrive det ind i koden?? ;)

(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>

Der sker intet... Kan man godt sætte en border på billedet?

ryktilhojre skal nok øges :P

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

er først på igen imorgen :P

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>

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>