Avatar billede brianmilan Juniormester
22. september 2006 - 23:08 Der er 8 kommentarer og
1 løsning

Få vist et billede når musen kommer over et link.

Hej,

Ohh jeg sidder fast, jeg har en liste med film som bliver trukket ud af MySQL og vist med PHP, og så har jeg et link til mere information om filmen, så kunne jeg godt tænke mig at nå man førte musen henover linket at den så kunne vise forside ppå dvd filmen ligesom den gør inde på www.dvd-venner.dk

Man jeg kan ikke hitte ud af det... :-(

Hilsen Brian
Avatar billede mclemens Nybegynder
22. september 2006 - 23:31 #1
Noget i denne stil?


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

<style type="text/css">

#micestalker{position:absolute;top:0px;left:0px;display:none;}

</style>

<script type="text/javascript">

var dmcy=dmcx=0,micestalk;
var stalkleft=10; // px til højre for mus (tal)  px til venstre for mus (-tal)
var stalktop=-10; // px til nedenunder mus (tal)  px over for mus (-tal)

var IE=((document.all) && (navigator.userAgent.indexOf('Opera')== -1))?true:false;
if(!IE)document.captureEvents(Event.mousemove)

document.onmousemove=function (e){

if(IE){
  dmcst=(tmenu=document.documentElement.scrollTop)?tmenu:document.body.scrollTop;
  dmcsl=(lmenu=document.documentElement.scrollLeft)?lmenu:document.body.scrollLeft;
  dmcy=event.clientY+dmcst;dmcx=event.clientX+dmcsl;
}else{dmcy=e.pageY;dmcx=e.pageX;}

  micestalk.style.top=dmcy+stalktop+"px";
  micestalk.style.left=dmcx+stalkleft+"px";

}


window.onload=function(){
  micestalk=document.getElementById("micestalker");
}

function shstalk(t,t2){
  micestalk.style.display=t;
  micestalk.firstChild.setAttribute("src",t2);
}
</script>


</head>


<body><br><br><br><br>

<b onmouseover="shstalk('block','http://www.eksperten.dk/img/elogo.png');" onmouseout="shstalk('none');">Test 1</b><br>
<b onmouseover="shstalk('block','http://www.eksperten.dk/img/flag_green.gif');" onmouseout="shstalk('none');">Test 2</b><br>
<b onmouseover="shstalk('block','http://www.eksperten.dk/img/flag_yellow.gif');" onmouseout="shstalk('none');">Test 3</b><br>
<b onmouseover="shstalk('block','http://www.eksperten.dk/img/flag_yellow.gif');" onmouseout="shstalk('none');">Test 4?</b><br>

<div id="micestalker"><img src="blank.gif"></div></body></html>
Avatar billede hingebjerg Nybegynder
22. september 2006 - 23:31 #2
Måske du kan bruge det her til noget:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">Link</p>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; visibility: hidden;"><img name="billede" src="" width="108" height="73" alt=""></div>
</body>
</html>
Avatar billede mclemens Nybegynder
22. september 2006 - 23:33 #3
( Mit forslag kommer fra denne tråd:
http://www.eksperten.dk/spm/723229#rid6359282 )
Avatar billede mclemens Nybegynder
22. september 2006 - 23:38 #4
Lige en lille rettelse:
var IE=((document.all) && (navigator.userAgent.indexOf('Opera')== -1))?true:false;
bør være:
var IE=((document.all) && (navigator.userAgent.indexOf('Opera')== -1));

(har ingen betydning men det andet er et overflødighedshorn at tildele en true
eller false værdi baseret på om parentesen returnerede en true eller false værdi :D
Avatar billede mclemens Nybegynder
22. september 2006 - 23:42 #5
Hvis det så ikke skal flyttes med musen hele tiden når man kører langs linjen, men kun når man kører hen på linket (samme funktion som på den side du tænker på) kan du bruge denne istedet:




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

<style type="text/css">

#micestalker{position:absolute;top:0px;left:0px;display:none;}

</style>

<script type="text/javascript">

var dmcy=dmcx=0,micestalk;
var stalkleft=10; // px til højre for mus (tal)  px til venstre for mus (-tal)
var stalktop=-10; // px til nedenunder mus (tal)  px over for mus (-tal)

var IE=((document.all) && (navigator.userAgent.indexOf('Opera')== -1));
if(!IE)document.captureEvents(Event.mousemove)

document.onmousemove=function (e){

if(IE){
  dmcst=(tmenu=document.documentElement.scrollTop)?tmenu:document.body.scrollTop;
  dmcsl=(lmenu=document.documentElement.scrollLeft)?lmenu:document.body.scrollLeft;
  dmcy=event.clientY+dmcst;dmcx=event.clientX+dmcsl;
}else{dmcy=e.pageY;dmcx=e.pageX;}

  if(micestalk.style.display=="none"){
    micestalk.style.top=dmcy+stalktop+"px";
    micestalk.style.left=dmcx+stalkleft+"px";
  }
}


window.onload=function(){
  micestalk=document.getElementById("micestalker");
  micestalk.style.display="none";
}

function shstalk(t,t2){
  micestalk.style.display=t;
  micestalk.firstChild.setAttribute("src",t2);
}
</script>


</head>


<body><br><br><br><br>

<b onmouseover="shstalk('block','http://www.eksperten.dk/img/elogo.png');" onmouseout="shstalk('none');">Test 1</b><br>
<b onmouseover="shstalk('block','http://www.eksperten.dk/img/flag_green.gif');" onmouseout="shstalk('none');">Test 2</b><br>
<b onmouseover="shstalk('block','http://www.eksperten.dk/img/flag_yellow.gif');" onmouseout="shstalk('none');">Test 3</b><br>
<b onmouseover="shstalk('block','http://www.eksperten.dk/img/flag_yellow.gif');" onmouseout="shstalk('none');">Test 4?</b><br>

<div id="micestalker"><img src="blank.gif"></div></body></html>
Avatar billede pesa Nybegynder
06. november 2006 - 00:51 #6
mclemens >>> Hvordan giver man billederne en ramme i dette script. F.eks. 5px #ffffff?
Avatar billede mclemens Nybegynder
07. november 2006 - 19:14 #7
Prøv at rette style delen til:
<style type="text/css">
#micestalker {position:absolute;top:0px;left:0px;display:none;}
#micestalker img {border: 5px solid #f00;}
</style>





... hvis det skal individualiseres så prøv:

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

<style type="text/css">
#micestalker {position:absolute;top:0px;left:0px;display:none;}
#micestalker img {border-style:solid;}
</style>

<script type="text/javascript">

var dmcy=dmcx=0,micestalk;
var stalkleft=10; // px til højre for mus (tal)  px til venstre for mus (-tal)
var stalktop=-10; // px til nedenunder mus (tal)  px over for mus (-tal)

var IE=((document.all) && (navigator.userAgent.indexOf('Opera')== -1))?true:false;
if(!IE)document.captureEvents(Event.mousemove)

document.onmousemove=function (e){

if(IE){
  dmcst=(tmenu=document.documentElement.scrollTop)?tmenu:document.body.scrollTop;
  dmcsl=(lmenu=document.documentElement.scrollLeft)?lmenu:document.body.scrollLeft;
  dmcy=event.clientY+dmcst;dmcx=event.clientX+dmcsl;
}else{dmcy=e.pageY;dmcx=e.pageX;}

  micestalk.style.top=dmcy+stalktop+"px";
  micestalk.style.left=dmcx+stalkleft+"px";

}


window.onload=function(){
  micestalk=document.getElementById("micestalker");
}

function shstalk(t,t2,t3,t4){
  micestalk.style.display=t;
  i=micestalk.firstChild;
  i.setAttribute("src",t2);
  i.style.borderWidth=t3;
  i.style.borderColor="#"+t4;
}
</script>


</head>


<body><br><br><br><br>

<b onmouseover="shstalk('block','http://www.eksperten.dk/img/elogo.png',2,'f00');" onmouseout="shstalk('none');">Test 1</b><br>
<b onmouseover="shstalk('block','http://www.eksperten.dk/img/flag_green.gif',10,'f00');" onmouseout="shstalk('none');">Test 2</b><br>
<b onmouseover="shstalk('block','http://www.eksperten.dk/img/flag_yellow.gif',5,'ff0');" onmouseout="shstalk('none');">Test 3</b><br>
<b onmouseover="shstalk('block','http://www.eksperten.dk/img/flag_yellow.gif',20,'00ff00');" onmouseout="shstalk('none');">Test 4?</b><br>
<b onmouseover="shstalk('block','http://www.eksperten.dk/img/flag_yellow.gif',0,'000');" onmouseout="shstalk('none');">Test 4?</b><br>

<div id="micestalker"><img src="blank.gif"></div></body></html>
Avatar billede pesa Nybegynder
09. november 2006 - 22:37 #8
Cool! Tak!
Avatar billede mclemens Nybegynder
09. november 2006 - 23:04 #9
Velbekomme :)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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