nicht angemeldet
Javascriptbefehl onmouseover per Javascript einfügen
Gunnar Bittersmann
StruppiHallo Zusammen,
ich habe ein Problem.
Ich möchte mittels Javascript zu Bildern per Javascript ein onmouseover-Befehl einfügen.
In den Developertools des IE sieht das auch meines Erachtens okay aus, doch leider regeiert der IE nicht auf das neue onmouseover.
Hat jemand eine Lösung?
Hier das HTML inkl. Script:
<html>
<html>
<head>
<title>Titel</title>
<script type="text/javascript">
function erweitern() {
document.getElementById('bild1').setAttribute("onmouseover", "anzeigen('bild1')\;");
document.getElementById('bild1').setAttribute("onmouseout", "schliessen()\;");
}
function anzeigen(das){
var BildUrl = "";
BildUrl=document.getElementById(das).src;
var HTMLCode = "<img src=\"" + BildUrl + "\">";
document.getElementById('container').insertAdjacentHTML("AfterBegin" , HTMLCode);
}
function schliessen(){
delay("100");
Neu = "<div id=\"container\" class =\"container\"><\/div>";
document.getElementById('container').innerHTML = Neu;
}
// a javascript "sleep" function
// gap specifies the sleep time in miliseconds
function delay(gap){
var then,now;
then=new Date().getTime();
now=then;
while((now-then)<gap) {
now=new Date().getTime();
}
}
</script>
<style type="text/css">
.container {
position: absolute;
top: 10%;
left: 30%;
margin-top: -5px;
margin-left: -75px;
}
</style>
</head>
<body>
<table border="1"><tr><td>
<a href="javascript:erweitern()" >Erweitern</a>
<img src="1.jpg" id="bild1" border="1" height="130" width="100" onmouseover="" onmouseout="">
</td><td>
<img src="2.jpg" id="bild2" border="1" height="130" width="100" onmouseover="anzeigen('bild2');" onmouseout="schliessen();">
</td></tr></table>
<div id="container" class ="container"></div>
</body>
</html>
Nach dem Ausführen von "erweitern" sieht das HTML wie folgt aus:
<!-- saved from url=(0029)file://Y:\test\Test_Page.html -->
<!-- Generated by Developer Tools. This might not be an accurate representation of the original source file -->
<HTML><HEAD><TITLE>Titel</TITLE>
<SCRIPT type=text/javascript>
function erweitern() {
document.getElementById('bild1').setAttribute("onmouseover", "anzeigen('bild1')\;");
document.getElementById('bild1').setAttribute("onmouseout", "schliessen()\;");
}
function anzeigen(das){
var BildUrl = "";
BildUrl=document.getElementById(das).src;
var HTMLCode = "<img src=\"" + BildUrl + "\">";
document.getElementById('container').insertAdjacentHTML("AfterBegin" , HTMLCode);
}
function schliessen(){
delay("100");
Neu = "<div id=\"container\" class =\"container\"><\/div>";
document.getElementById('container').innerHTML = Neu;
}
// a javascript "sleep" function
// gap specifies the sleep time in miliseconds
function delay(gap){
var then,now;
then=new Date().getTime();
now=then;
while((now-then)<gap) {
now=new Date().getTime();
}
}
</SCRIPT>
<STYLE type=text/css>.container {
POSITION: absolute; MARGIN-TOP: -5px; MARGIN-LEFT: -75px; TOP: 10%; LEFT: 30%
}
</STYLE>
</HEAD>
<BODY>
<TABLE border=1>
<TBODY>
<TR>
<TD><A href="javascript:erweitern()">Erweitern</A> <IMG id=bild1 onmouseover="anzeigen('bild1');" onmouseout=schliessen(); border=1 src="1.jpg" width=100 height=130> </TD>
<TD><IMG id=bild2 onmouseover="anzeigen('bild2');" onmouseout=schliessen(); border=1 src="2.jpg" width=100 height=130> </TD></TR></TBODY></TABLE>
<DIV id=container class=container>
<DIV id=container class=container></DIV></DIV></BODY></HTML>
-
@@Snoop:
nuqneH
In den Developertools des IE sieht das auch meines Erachtens okay aus, doch leider regeiert der IE nicht auf das neue onmouseover.
Benutze nicht
setAttribute(), sondern gib den Eventhandler als Eigenschaft an:document.getElementById('bild1').onmouseover = function () { anzeigen('bild1') };Und es ist unsinnig, in der Funktion
anzeigen()das Element nochmals pergetElementById()aus dem DOM rauszusuchen. Du hast bereits eine Referenz auf das Objekt; übergib diese als Parameter:document.getElementById('bild1').onmouseover = function () { anzeigen(this) };In der Funktion
anzeigen()dann statt 'document.getElementById(das).src' nur doch 'das.src'.Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Neben der Antwort von Gunnar, noch ein Hinweis
// a javascript "sleep" function
// gap specifies the sleep time in miliseconds
function delay(gap){
var then,now;
then=new Date().getTime();
now=then;
while((now-then)<gap) {
now=new Date().getTime();
}
}Diese Funktion solltest du schnellstens wegwerfen. Damit frierst du den Browser komplett ein. Eine Verzögerung erreichst du mit JS durch http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout@title=window.setTimeout().
Struppi.
-
Neben der Antwort von Gunnar, noch ein Hinweis
// a javascript "sleep" function
// gap specifies the sleep time in miliseconds
function delay(gap){
var then,now;
then=new Date().getTime();
now=then;
while((now-then)<gap) {
now=new Date().getTime();
}
}Diese Funktion solltest du schnellstens wegwerfen. Damit frierst du den Browser komplett ein. Eine Verzögerung erreichst du mit JS durch http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout@title=window.setTimeout().
Struppi.
Dank euch beiden! Hat funktioniert!
-