✔ MouseOver-Problem

D

Doubletaker

Mitglied
Wie kriege ich es hin, dass sich per Mouseover ein Bild ändert, ohne das es
dabei eine Verlinkung gibt? Bin am verzweifeln... Denn ich muss diese Variante:

<SCRIPT language="JavaScript">
<!--
function initPage() {
if (navigator.userAgent.indexOf("Mozilla/2.") == -1) {
a_1 = new Image(); a_1.src ="images/xxxa1.gif"
a_2 = new Image(); a_2.src ="images/xxxa2.gif"
}
} // initPage
function highlight(item) {
imgName="m_"+item
imgSrc=eval(item+"_2.src")
this.document[imgName].src=imgSrc
} // highlight
function norm(item) {
imgName="m_"+item
imgSrc=eval(item+"_1.src")
this.document[imgName].src=imgSrc
window.status=""
} // norm
//-->
</SCRIPT>

Dabei benutzen können, weil auch einige Grafiken verlinkt werden
 
Irgendwie funktioniert das alles nicht so wie ich es gerne hätte... :confused:
Also ich möchte gerne, dass nur die unteren vier Quadrate einen Link
hinterlegt haben und die anderen nur den MouseOver-Effekt haben...
Aber irgendwie klappt es halt nicht. Hier mein bisheriger Code dafür:

HTML: 
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT language="JavaScript">

<!--

function initPage() {
  if (navigator.userAgent.indexOf("Mozilla/2.") == -1) {
   a_1 = new Image(); a_1.src ="images/a1.gif"
   a_2 = new Image(); a_2.src ="images/a2.gif"
   b_1 = new Image(); b_1.src ="images/b1.gif"
   b_2 = new Image(); b_2.src ="images/b2.gif"
   c_1 = new Image(); c_1.src ="images/c1.gif"
   c_2 = new Image(); c_2.src ="images/c2.gif"
   d_1 = new Image(); d_1.src ="images/d1.gif"
   d_2 = new Image(); d_2.src ="images/d2.gif"
   e_1 = new Image(); e_1.src ="images/e1.gif"
   e_2 = new Image(); e_2.src ="images/e2.gif"
   f_1 = new Image(); f_1.src ="images/f1.gif"
   f_2 = new Image(); f_2.src ="images/f2.gif"
   g_1 = new Image(); g_1.src ="images/g1.gif"
   g_2 = new Image(); g_2.src ="images/g2.gif"
   h_1 = new Image(); h_1.src ="images/h1.gif"
   h_2 = new Image(); h_2.src ="images/h2.gif"
   i_1 = new Image(); i_1.src ="images/i1.gif"
   i_2 = new Image(); i_2.src ="images/i2.gif"
   j_1 = new Image(); j_1.src ="images/j1.gif"
   j_2 = new Image(); j_2.src ="images/j2.gif"
   k_1 = new Image(); k_1.src ="images/k1.gif"
   k_2 = new Image(); k_2.src ="images/k2.gif"
   l_1 = new Image(); l_1.src ="images/l1.gif"
   l_2 = new Image(); l_2.src ="images/l2.gif"
   m_1 = new Image(); m_1.src ="images/m1.gif"
   m_2 = new Image(); m_2.src ="images/m2.gif"
   n_1 = new Image(); n_1.src ="images/n1.gif"
   n_2 = new Image(); n_2.src ="images/n2.gif"
   o_1 = new Image(); o_1.src ="images/o1.gif"
   o_2 = new Image(); o_2.src ="images/o2.gif"
   p_1 = new Image(); p_1.src ="images/p1.gif"
   p_2 = new Image(); p_2.src ="images/p2.gif"
  }
} // initPage

function highlight(item) {
    imgName="m_"+item
    imgSrc=eval(item+"_2.src")
    this.document[imgName].src=imgSrc
} // highlight

function norm(item) {
    imgName="m_"+item
    imgSrc=eval(item+"_1.src")
    this.document[imgName].src=imgSrc
    window.status=""
} // norm
//-->

</SCRIPT>
</head>
<body onload="initPage()">
<table width="100%" height="100%"  border="0">
  <tr>
    <td align="center" valign="middle"><table width="560" height="560" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="140" height="140"><a href="javascript:void(0)" onmouseover="highlight('a');return true" onmouseout="norm('a')"><img src="images/a1.gif" border="0" width="140" height="140"></a></td>
        <td width="140" height="140"><a href="javascript:void(0)" onmouseover="highlight('b');return true" onmouseout="norm('b')"><img src="images/b1.gif" border="0" width="140" height="140"></a></td>
        <td width="140" height="140"><a href="javascript:void(0)" onmouseover="highlight('c');return true" onmouseout="norm('c')"><img src="images/c1.gif" border="0" width="140" height="140"></a></td>
        <td width="140" height="140"><a href="javascript:void(0)" onmouseover="highlight('d');return true" onmouseout="norm('d')"><img src="images/d1.gif" border="0" width="140" height="140"></a></td>
      </tr>
      <tr>
        <td width="140" height="140"><a href="javascript:void(0)" onmouseover="highlight('e');return true" onmouseout="norm('e')"><img src="images/e1.gif" border="0" width="140" height="140"></a></td>
        <td width="140" height="140"><a href="javascript:void(0)" onmouseover="highlight('f');return true" onmouseout="norm('f')"><img src="images/f1.gif" border="0" width="140" height="140"></a></td>
        <td width="140" height="140"><a href="javascript:void(0)" onmouseover="highlight('g');return true" onmouseout="norm('g')"><img src="images/g1.gif" border="0" width="140" height="140"></a></td>
        <td width="140" height="140"><a href="javascript:void(0)" onmouseover="highlight('h');return true" onmouseout="norm('h')"><img src="images/h1.gif" border="0" width="140" height="140"></a></td>
      </tr>
      <tr>
        <td width="140" height="140"><a href="javascript:void(0)" onmouseover="highlight('i');return true" onmouseout="norm('i')"><img src="images/i1.gif" border="0" width="140" height="140"></a></td>
        <td width="140" height="140"><a href="javascript:void(0)" onmouseover="highlight('j');return true" onmouseout="norm('j')"><img src="images/j1.gif" border="0" width="140" height="140"></a></td>
        <td width="140" height="140"><a href="javascript:void(0)" onmouseover="highlight('k');return true" onmouseout="norm('k')"><img src="images/k1.gif" border="0" width="140" height="140"></a></td>
        <td width="140" height="140"><a href="javascript:void(0)" onmouseover="highlight('l');return true" onmouseout="norm('l')"><img src="images/l1.gif" border="0" width="140" height="140"></a></td>
      </tr>
      <tr>
        <td width="140" height="140"><a href="1.htm" onmouseover="highlight('m');return true" onmouseout="norm('m')"><img src="images/m1.gif" border="0" width="140" height="140"></a></td>
        <td width="140" height="140"><a href="2.htm" onmouseover="highlight('n');return true" onmouseout="norm('n')"><img src="images/n1.gif" border="0" width="140" height="140"></a></td>
        <td width="140" height="140"><a href="3.htm" onmouseover="highlight('o');return true" onmouseout="norm('o')"><img src="images/o1.gif" border="0" width="140" height="140"></a></td>
        <td width="140" height="140"><a href="4.htm" onmouseover="highlight('p');return true" onmouseout="norm('p')"><img src="images/p1.gif" border="0" width="140" height="140"></a></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>


EDIT: Ich kriege auch immer "Fehler auf der Seite" in der Statusleiste angezeigt...
 
Zuletzt bearbeitet:
Jede Anweisungszeile in JavaScript muss mit einem Semikolon beendet werden!

Bsp:
HTML: 
function initPage() {
  if  (navigator.userAgent.indexOf("Mozilla/2.") == -1) {
   a_1 = new Image();
   a_1.src ="images/a1.gif";
   a_2 = new Image(); 
   a_2.src ="images/a2.gif";
   b_1 = new Image();
   b_1.src ="images/b1.gif";
   b_2 = new Image();
   b_2.src ="images/b2.gif";
   c_1 = new Image();
   c_1.src ="images/c1.gif";
 
// u.s.w.

//ebenso hier:
function highlight(item) {
    imgName="m_"+item;
    imgSrc=eval(item+"_2.src");
    this.document[imgName].src=imgSrc;
} // highlight

soviel halt schon mal zum formellen, ich habe mir die Logik in deinem Code noch keine Millisekunde angesehen.

Aber es ist immer ratsam erst einmal das Werkzeug zu beherrschen, bevor man anfängt, damit etwas zu produzieren! ;)
 
Daran lag es leider nicht... :(

EDIT: Habe den Fehler gefunden... Hab nur die Image Namen vergessen gehabt.
denn es hätte auch ohne Semikola funktioniert, aber ich hab sie jetzt drin. aber
trotzdem danke für deine bemühnungen
 
Zuletzt bearbeitet:
Doubletaker hat gesagt.:
EDIT: Habe den Fehler gefunden... Hab nur die Image Namen vergessen gehabt.
denn es hätte auch ohne Semikola funktioniert, aber ich hab sie jetzt drin. aber
trotzdem danke für deine bemühnungen
Zum Vergrößern anklicken....

Ja, ok.
Es geht aber ja ums Prinzip und um die Basis.
JavaScript ohne Semikola zu schreiben, ist in etwa wie ein Haus ohne Zement zu bauen. Es hält... fragt sich nur, wie lange.

Btw. Deine Funktion ist nur für den IE, der geht mit so schlecht gecodetem Zeug (tschuldigung) immer sehr freizügig um.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück