[HTML/Javascript] Doctype Problem

[martin]

Hi

ich habe mehrere <span> Objekte und möchte ein Div genau an der Position des jeweiligen <span> Objektes anzeigen lassen, sobald die Maus über diesem Objekt bewegt wird. Das Ganze funktioniert so wie ich es gerne hätte, aber leider nur, so lange ich KEINEN DOCTYPE angebe.
Hier mal etwas Code:

<script> 
function load_detailview_(e,img) {
    
    if (e AND img){
        document.getElementById("detail").style.top = e.layerY+30;
        document.getElementById("detail").style.left = e.layerX+100;
        document.getElementById("detail").innerHTML = "<img width='250px' src='"+img+"'>";
        document.getElementById("detail").style.display = "block"; 
    }else{
        document.getElementById("detail").style.display = "none";
    } 
}
</script>

<div style='position:relative;border: 1px solid red;'>

<span onmousemove=load_detailview_(event,'./test.jpg') onmouseout=load_detailview_()>TEST</span>
<div id='detail' style='position:absolute;border:1px solid black;display:none;'></div>

</div>

Wie gesagt, KEIN !DOCTYPE angegeben, funktioniert das so. Leider ist aber die ganze Seite auf "!DOCTYPE HTML" ausgerichtet und ich muss mich daran halten.
Wenn ich den Doctype entsprechend setze, wird das DIV zwar eingeblendet und auch die Positionsangaben stimmen, aber leider werden sie anscheinend mit document.getElementById("detail").style.top nicht mehr zugewiesen und bleiben auf 0.
Hat jemand eine Idee, wie ich die Position dennoch zugewiesen bekomme?

dank

 

[martin]

Hat sich erledigt. Ich war mar wieder nach dem Posten intelligenter bei der Auswahl meiner Suchbegriffe in Google als vorher.

document.getElementById("detail").style.top = e.layerY+30+"px";

brachte die Lösung, also die Einheit hatte ich vergessen!

Gruß

 

[Athaba]

Wow, es gibt noch Leute, die ohne jQuery arbeiten.

 

[martin]

Leider mache ich des Öfteren Sachen komplizierter als sie sind. jQuery könnte ich natürlich verwenden, gäbe es da denn eine Funktion, die mein Vorhaben abdeckt?

 

[Athaba]

Ich meinte vor allem, weil du immer die lange "document.getElementById("detail")"- Wurst hast. Das könnte man zumindest in eine Variable tun.

Je nachdem was du genau willst gibt es wohl schönere Lösungen. Willst du, dass das Bild der Maus folgt? Wenn nicht geht es auch ohne JavaScript.

<!doctype 'html'>
<style>
	div img{position:absolute;display:none;}
	div:hover img{display:block;}
</style>
<div><span>TEST</span><img src=test.jpg></div>

Eventuell willst du :hover erweitern, damit das Bild immer an einem bestimmten Platz ist. Wenn du mir sagst wozu genau du das verwendest könnte ich dir ein passendes Script vorschlagen.

EDIT:

Zum Ansehen mal deine Version in jQuery:

<!doctype 'html'>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js></script>

<script>
$(function() { // Stellt sicher, dass jQuery geladen ist
  // Nimmt zwei Funtionen
  // Eine für rein, eine für raus
  $('span').hover(
    function(e){ //Rein
      var detail = $('#detail'); // oder immer hinschreiben
      var name = $('span').text().toLowerCase(); // Damit du eine beliebige Datei verwenden kannst
      detail.html('<img width="250px" src="'+name+'.jpg">');
      detail.css({
        left:     e.layerX + 100 + 'px',
        top:      e.layerY + 30 + 'px',
        display: 'block'
      });
    },
    function(){ // Raus
      $('#detail').css('display', 'none');
    }
  );
});
</script>

<div style="position:relative;border: 1px solid red;">
	<span>TEST</span>
	<div id=detail style="position:absolute;border:1px solid black;display:none;"></div>
</div>

Ich bin mir wie gesagt nicht sicher, was du damit machst. Ich nehme an <span> wäre eine Klasse und TEST ist quasi der Dateiname.

Ein Vorteil an jQuery ist auch, dass es viele Plugins gibt, die kaum noch Wünsche offen lassen.

 

[martin]

Also was ich will, ist dass das "Bild" der Maus folgt, ja. Das Bild habe ich allerdings nur als Beispiel hier im Code eingefügt, es wird ein DIV mit verschiedenen Textinformationen drin.

 

[oenone]

Für Athabas version müssen die Clients zulassen, dass JavaScript aus Fremdquellen (hier googleapis) ausgeführt wird.

 

[Athaba]

oder man lädt sich jQuery einfach auf den Server.

qTip2 ist dir zu viel?