Mus over tekst medfører Billede

Det kommer jo helt an på, hvor du vil have billedet til at være.

Det kunne f.eks. laves således:

<script type="text/javascript">
function showPic(s){
  var o=document.getElementById("personpic");

  if(!s){
    o.style.display="none";
    return false,
  }

  o.setAttribute("src",s);
  o.style.display="block";
}
</script>

<img id="personpic" style="display:none" alt="Personbillede">

- <span onmouseover="showPic('peter.jpg')" onmouseout="showPic()">Peter</span><br>
- <span onmouseover="showPic('hans.jpg')" onmouseout="showPic()">Hans</span><br>
- <span onmouseover="showPic('morten.jpg')" onmouseout="showPic()">Morten</span><br>

Så sætter du bare:

<img id="personpic" style="display:none" alt="Personbillede">

der hvor det skal vises.

Jeg vil gerne bare have at det kommer op ved siden af musen - som ALT-tekst ,)

Bonus spørgsmål :)

Hvis jeg nu vil have billedet et bestemt sted bruger jeg din første kode. Kan jeg få en tekst under der også. Så der vises billedet og under står der Hans...

Følgende kode skulle gerne gøre det muligt at få tekst med:

<script type="text/javascript">
function showPic(s,sText){
  var o=document.getElementById("personpic");

  if(!s){
    o.style.display="none";
    return false,
  }

  o.getElementsByTagName("img")[0].setAttribute("src",s);
  o.lastChild.nodeValue=sText;
  o.style.display="block";
}
</script>

<div id="personpic" style="display:none"><img alt="Personbillede">&nbsp;</div>

- <span onmouseover="showPic('peter.jpg','Dette er Peter')" onmouseout="showPic()">Peter</span><br>
- <span onmouseover="showPic('hans.jpg','Dette er Peter')" onmouseout="showPic()">Hans</span><br>
- <span onmouseover="showPic('morten.jpg','Dette er Peter')" onmouseout="showPic()">Morten</span><br>

Det med musen bliver mere kompliceret og kræver, at man gør det lidt anderledes. Det var derfor jeg kommenterede, at du jo slet ikke skrev noget om, hvordan billedet skulle vises.

Det kan vist gøres nogenlunde sådan her:

<script type="text/javascript">
function showPic(s,sText){
  var o=document.getElementById("personpic");

  if(!s){
    o.style.display="none";
    return false,
  }

  o.getElementsByTagName("img")[0].setAttribute("src",s);
  o.lastChild.nodeValue=sText;
  o.style.top=Y+10+"px";
  o.style.left=X+10+"px";
  o.style.display="block";
}

var bIE=document.all?true:false;
if(!bIE)document.captureEvents(Event.MOUSEMOVE);

document.onmousemove=getMouseXY;

var X = Y = 0;

function getMouseXY(e){
  if(bIE){
    X = event.clientX + document.body.scrollLeft;
    Y = event.clientY + document.body.scrollTop;
  }else{
    X = e.pageX;
    Y = e.pageY;
  }
  if(X<0)X=0;
  if(Y<0)Y=0;
  return true;
}
</script>

<div id="personpic" style="position:absolute;display:none"><img alt="Personbillede">&nbsp;</div>

- <span onmouseover="showPic('peter.jpg','Dette er Peter')" onmouseout="showPic()">Peter</span><br>
- <span onmouseover="showPic('hans.jpg','Dette er Peter')" onmouseout="showPic()">Hans</span><br>
- <span onmouseover="showPic('morten.jpg','Dette er Peter')" onmouseout="showPic()">Morten</span><br>

Det har selvfølgelig ikke noget med en rigtig ALT-tekst at gøre, det efterligner blot. (Og en ALT-tekst ligger kun på billeder, så du mener nok en TITLE-tekst. =)

Tak for point!

Jeg var vist lidt for hurtig...

Det virker ikke:

<script type="text/javascript">
function showPic(s,sText){
  var o=document.getElementById("personpic");

  if(!s){
    o.style.display="none";
    return false,
  }

  o.getElementsByTagName("img")[0].setAttribute("src",s);
  o.lastChild.nodeValue=sText;
  o.style.display="block";
}
</script>

<div id="personpic" style="display:none"><img alt="Personbillede">&nbsp;</div>

- <span onmouseover="showPic('Peter.jpg','Dette er Peter')" onmouseout="showPic()">Peter</span><br>
- <span onmouseover="showPic('hans.jpg','Dette er Peter')" onmouseout="showPic()">Hans</span><br>
- <span onmouseover="showPic('morten.jpg','Dette er Peter')" onmouseout="showPic()">Morten</span><br>

<BR><BR><BR>

<img id="personpic" style="display:none" alt="Personbillede">


Fejl:

syntax error
[Break on this error] }\n
test.htm (line 9)

showPic is not defined
[Break on this error]
test.htm (line 1)

showPic is not defined
[Break on this error]
test.htm (line 1)

return false,
skal være:
return false;

Så det er nok syntax-error'en.

Kan jeg se siden i aktion/inaktion? Ellers har jeg ikke umiddelbart bud på de 2 andre fejl.

http://www.houlborg.dk/eksperten/test.htm

Det virker nogenlund nu... Jeg vil dog gerne kunne bestemme hvor billedet skal åbnes. Og teksten skal stå under...

Fx. Al tekst i venstre side af mit vindue og billedet åbnes centret

Ret dette:

<div id="personpic" style="display:none"><img alt="Personbillede">&nbsp;</div>

til:

<div id="personpic" style="display:none"><img alt="Personbillede"><br>&nbsp;</div>

Så står teksten på en ny linje. Og du flytter bare den linje derhen, hvor de skal vises.

Jeg synes jeg har prøvet at flytte den linie rundt. Se min kilde kode... <BR><BR><BR>....

Jo, men du skal ikke bruge <br>. Du skal f.eks. prøve at indsætte den under dine navne.

Prøv at se min kildekode på

http://www.houlborg.dk/eksperten/test.htm

Den burde jo vise billedet i kolonne to, men det gør den ikke?

Er du der stadig w13? Synes ikke det virker som det burde...

Burde den det? :)

Du har godt nok indsat (noget af) det i kolonne 2, men du har ikke fjernet det fra kolonne 1. Derved eksisterer elementet 2 steder, og koden vælger så bare det første af de 2 - dvs. elementet i kolonne 1!

Ret til:

<script type="text/javascript">
function showPic(s,sText){
  var o=document.getElementById("personpic");

  if(!s){
    o.style.display="none";
    return false;
  }

  o.getElementsByTagName("img")[0].setAttribute("src",s);
  o.lastChild.nodeValue=sText;
  o.style.display="block";
}
</script>
<Table border='1'><TR><TD width='300'>

- <span onmouseover="showPic('Peter.png','<BR>Dette er Peter')" onmouseout="showPic()"><br>Peter</span>
- <span onmouseover="showPic('Peter.png','<BR>Dette er Peter')" onmouseout="showPic()"><br>Hans</span>
- <span onmouseover="showPic('Peter.png','<BR>Dette er Peter')" onmouseout="showPic()"><br>Morten</span>

</TD><TD width='300'>

<div id="personpic" style="display:none"><img alt="Personbillede">&nbsp;</div>

</TD></TR></Table>

Tak!

Tak for point. =)