Script: onMouseOver mit Java

stefan999

Zitat von Gast

ich bin Gast und habe mal eure Posts gelesen.
In dem letzten code ist für das anzuzeigende Bild ein Pfad angegeben worden, was offensichtlich nicht funktioniert.
Zitat "onMouseOver="changeImage('img1','res/b2.gif')""

Ich interessiere mich derzeit auch für ein funktionierendes script in der Richtung. Was mich stört ist halt die Tatsache, dass man keine Pfadangaben in den onmouseover Anweisungen verwenden kann.

Außerdem fehlen die Alt-Attribute bei den IMG-Tags. Gerade bei Bildern hinter denen ein Link liegt ein absolutes Muss.

stefan999,

Du hast Recht mit dem Alt Attribut. Aber hast du auch ne Lösung für das Problem mit den Pfadangaben?

stefan999

Zitat von Anonymous

stefan999,

Du hast Recht mit dem Alt Attribut. Aber hast du auch ne Lösung für das Problem mit den Pfadangaben?

Als Lösung könnte ich anbieten, CSS statt JS zu verwenden.

Der entsprechende HTML-Code würde dann folgendermaßen aussehen:

Code

<div class="nav">
[url='geschichte.html'][img]res/blind.gif[/img][/url] 
[url='sortiment.html'][img]res/blind.gif[/img][/url] 
[url='links.html'][img]res/blind.gif[/img][/url] 
[url='impressum.html'][img]res/f.gif[/img][/url]</div>

Das CSS sieht dann etwa so aus:

Code

.nav a {
display:block;
width:xxpx;
height:yypx;
min-width:xxpx;
min-height:yypx;
}


#nav1 {
background-image:url(res/a.gif);
}


#nav1:hover {
background-image:url(res/a1.gif)
}


#nav2 {
background-image:url(res/b.gif);
}


#nav2:hover {
background-image:url(res/b1.gif)
}


#nav3 {
background-image:url(res/c.gif);
}


#nav3:hover {
background-image:url(res/c1.gif)
}


#nav4 {
background-image:url(res/d.gif);
}


#nav4:hover {
background-image:url(res/d1.gif)
}

Alles anzeigen

Ich danke dir, dass werde ich mal probieren. In der Zwischenzeit habe ich noch folgenden JS code gefunden. Der ermöglicht eine Pfadangabe bei den Grafiken. Man muss nur eine separate id für jeden button vergeben. Vielleicht kannst du ja mal drüberschauen. Zur Info. Ich bin nicht alzu bewandert in html, JS und Co.

Code

<head>
<script LANGUAGE="JavaScript">
function newImage(arg) {
if (document.images) {
vm = new Image();
vm.src = arg;
return vm;
}
}


function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
id5_03_over = newImage("/picture/Buttonmovr.gif")
preloadFlag = true;
}
}
</script>


<body ONLOAD="preloadImages();"></body></head>








<table border="0" cellpadding="0" cellspacing="0" width="xxpx  bgcolor="#FFFF00" align="center">
<colgroup>
   <col width="xxpx">
   <col width="xxpx>    
</colgroup>
<tr>
<td height="xx" align="center"><a href="##.html" 
ONMOUSEOVER="changeImages('id5_03', '/picture/Buttonmovr.gif'); return true;"
ONMOUSEOUT="changeImages('id5_03', '/picture/Button.gif'); return true;">
[img]/picture/Button.gif[/img]</a> 
</td>
<td height="xx">##.html</td></tr>

Alles anzeigen