Mouseover mit 2 unterschiedlichen Grafiken und IFrame


 
Neues Thema eröffnen   Neue Antwort erstellen    Webmaster Forum -> Hilfe für Webmaster -> Javascript
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  

Geht das überhaupt ?
Ja
100%
 100%  [ 1 ]
Nein
0%
 0%  [ 0 ]
Stimmen insgesamt : 1

Autor Nachricht
Tommy-GER-
Mitglied

BeitragMouseover mit 2 unterschiedlichen Grafiken und IFrame Antworten mit Zitat

Hallo erstmal, endlich mal ein Seriöses Forum.

Hoffe das mir hier jemand weiterhelfen kann da ich die Firmenseite nicht fertig bekomme.

Ich stehe vor einem großen Problem, das ich nicht bei euch finden konnte aber auch sonst nirgends wo.

Ich arbeite gerade an deiner Firmenseite und hänge fest:

Habe 4 Grafiken im Quadrat die mit Mouseover Grafiken funktionieren.
Wenn ich Drüber gehe, dann soll sich eine andere Grafik noch mit ändern.
Wie mache ich es aber das ich bei allen 4 Buttons auch gleich das eigebetete IFrame mitändert, ohne klicken zu müssen.

Siehe Beispielbild:


Vielleicht wisst Ihr meine Lösung dafür.
Ich wäre euch sehr dankbar dafür.
28 Apr 2009 12:53
Benutzer-Profile anzeigen Private Nachricht senden
axinio Internet Marketing
Werner
Homepage-Total.de
Moderator

Beitrag Antworten mit Zitat

Code:
onMouseOver="parent.IFRAMEFENSTERNAME.location.href='seite2.htm';"

_________________
Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt
28 Apr 2009 21:48
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
Tommy-GER-
Mitglied

Beitrag Antworten mit Zitat

Werner hat Folgendes geschrieben:
Code:
onMouseOver="parent.IFRAMEFENSTERNAME.location.href='seite2.htm';"


Danke erstmal für die schnelle Hilfe.

Sorry wegen dem Code, ist mir untergegangen.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>xxy</title> <style type="text/css"> <!--
body {
        background-color: #CCC;
}
body,td,th {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000;
}
a:link {
        text-decoration: none;
        color: #000;
}
a:visited {
        text-decoration: none;
        color: #000;
}
a:hover {
        text-decoration: none;
}
a:active {
        text-decoration: none;
}
--> </style> <SCRIPT LANGUAGE="JavaScript">
pic = new Image(120, 120);
pic.src = "\images\Button\Kontakt.jpg";
pic = new Image(120, 120);
pic.src = "\images\Button\Button Karriere.jpg";
pic = new Image(120, 120);
pic.src = "\images\Button\Button Unternehmen.jpg";
pic = new Image(120, 120);
pic.src = "\images\Button\Button Leistung.jpg";
pic = new Image(120, 120);
pic.src = "\images\Button\Kontakt.gif";
pic = new Image(120, 120);
pic.src = "\images\Button\Button Karriere.gif";
pic = new Image(120, 120);
pic.src = "\images\Button\Button Unternehmen.gif";
pic = new Image(120, 120);
pic.src = "\images\Button\Button Leistung.gif";
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}


function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}


function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</SCRIPT>
</head>
<body onload="MM_preloadImages('images/Button/Button Unternehmen.gif','images/Button/Button Loesungen.gif','images/Button/Button Karriere.gif','images/Button/Button Kontakt.gif')">

<table width="734" height="599" border="0" align="center" id="s"> <tr> <td height="58" colspan="2" bgcolor="#FFFFFF"><table width="884" border="0" align="center"> <tr> <td width="548" height="68"><h1>&quot;Ihre Finanzexperten&quot;</h1></td> <td width="326"><img src="img/Logo.jpg" width="174" height="66" alt="Logo" />
</td> </tr> </table></td> </tr>

<tr> <td height="17" colspan="2" bgcolor="#FFFFFF"><topmargin="0" marginheight="0"  leftmargin="0" marginwidth="0" scroll="auto"
onload="window.setTimeout('datumuhr()',1000)"> </td> </tr>

<tr> <td height="17" colspan="2" bgcolor="#FFFFFF">&nbsp;</td> </tr> <tr> <td width="451" height="176" bgcolor="#FFFFFF"><table width="519" height="269" border="0" align="center"> <tr> <td width="513" height="265"><table width="200" border="0" align="center">
<tr>
<td height="259"><img src="/images/Bilder/baby.jpg" width="342" height="257" />
</td>
<td colspan="2"><table width="200" border="0"> <tr> <td height="126"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Unternehmen','','images/Button/Button Unternehmen.gif',1)"><img src="/images/Button/Button Unternehmen.jpg" alt="Unternehmen - Button" name="Unternehmen" width="120" height="120" border="0" id="Unternehmen" /></a></td>

<td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lösungen','','images/Button/Button Loesungen.gif',1)"><img src="/images/Button/Button Loesungen.jpg" alt="Lösungen - Button" name="Lösungen" width="120" height="120" border="0" id="Lösungen" /></a></td> </tr>

<tr> <td height="122"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Karriere','','images/Button/Button Karriere.gif',1)"><img src="/images/Button/Button Karriere.jpg" alt="Karriere - Button" name="Karriere" width="120" height="120" border="0" id="Karriere" /></a>
</td>
<td>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakt','','images/Button/Button Kontakt.gif',1)"><img src="/images/Button/Button Kontakt.jpg" alt="Kontakt - button" name="Kontakt" width="120" height="120" border="0" id="Kontakt" /></a></td> </tr>

</table></td> </tr> </table></td> </tr> </table></td> <td width="273" rowspan="2" bgcolor="#FFFFFF"><table width="220" height="406" border="0" align="center"> <tr> <td width="210" height="402"><img src="/images/Bilder/index1.jpg" width="267" height="400" /></td> </tr> </table></td> </tr>

<tr> <td height="182" bgcolor="#FFFFFF"><iframe src="willkommen-inhalt.html" style="border:0px #13235b dotted;" name="haupt" scrolling="auto" frameborder="1" align=aus marginheight="0px" marginwidth="0px" height="180" width=99%></iframe></td> </tr>

<tr> <td height="21" colspan="2" bgcolor="#FFFFFF"><table width="113" height="19" border="0" align="center"> <tr>

<td width="50"><h5><a href="willkommen-inhalt.html" target="haupt">Start</a></h5></td>

<td width="53"><h5><a href="impressum-inhalt.html" target="haupt">Impressum</a>
</h5></td> </tr> </table></td> </tr> </table> </body> </html>
29 Apr 2009 00:16
Benutzer-Profile anzeigen Private Nachricht senden
Werner
Homepage-Total.de
Moderator

Beitrag Antworten mit Zitat

Das sollte dann in etwa so aussehen (habe mal etwas Code kopiert) :
Code:
onmouseover="MM_swapImage('Kontakt','','images/Button/Button Kontakt.gif',1); parent.haupt.location.href='seite2.htm';">

_________________
Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt
29 Apr 2009 18:37
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
Gast


Beitrag Antworten mit Zitat

Werner hat Folgendes geschrieben:
Das sollte dann in etwa so aussehen (habe mal etwas Code kopiert) :
Code:
onmouseover="MM_swapImage('Kontakt','','images/Button/Button Kontakt.gif',1); parent.haupt.location.href='seite2.htm';">


Hi Werner, danke erstmal, bin damit ein ganzes Stück weiter, bloß es passiert folgendes.

Wenn ich über Button 1,2,3 gehe verändert sich nur Button 4 von der Grafik ... mouseover mäßig, aber die anderen reagieren nicht.

D.h. Button 1,2,3 bleiben unverändert und nur der 4te zeigt Veränderungen.
Auch also die Grafiken von 1,2,3 die da nicht rein sollen.

Das untere Frame ändert sich jetzt aber wie es sollte.


Code:
<SCRIPT LANGUAGE="JavaScript">
pic = new Image(120, 120);
pic.src = "\images\Button\Kontakt.jpg";
pic = new Image(120, 120);
pic.src = "\images\Button\Button Karriere.jpg";
pic = new Image(120, 120);
pic.src = "\images\Button\Button Unternehmen.jpg";
pic = new Image(120, 120);
pic.src = "\images\Button\Button Leistung.jpg";
pic = new Image(120, 120);
pic.src = "\images\Button\Kontakt.gif";
pic = new Image(120, 120);
pic.src = "\images\Button\Button Karriere.gif";
pic = new Image(120, 120);
pic.src = "\images\Button\Button Unternehmen.gif";
pic = new Image(120, 120);
pic.src = "\images\Button\Button Leistung.gif";
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</SCRIPT>

</head>

<body onload="MM_preloadImages('images/Button/Button Unternehmen.gif','images/Button/Button Loesungen.gif','images/Button/Button Karriere.gif','images/Button/Button Kontakt.gif')">
<table width="734" height="599" border="0" align="center" id="s">
  <tr>
    <td height="58" colspan="2" bgcolor="#FFFFFF"><table width="884" border="0" align="center">
      <tr>
        <td width="548" height="68"><h1>&quot;Ihre Finanzexperten&quot;</h1></td>

        <td width="326"><img src="img/Logo.jpg" width="174" height="66" alt="Logo" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="17" colspan="2" bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td height="17" colspan="2" bgcolor="#FFFFFF">&nbsp;</td>

  </tr>
  <tr>
    <td width="451" height="176" bgcolor="#FFFFFF"><table width="519" height="269" border="0" align="center">
      <tr>
        <td width="513" height="265"><table width="200" border="0" align="center">
          <tr>
            <td height="259"><img src="images/Bilder/baby.jpg" width="342" height="257" /></td>
            <td colspan="2"><table width="200" border="0">
              <tr>

                <td height="126"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakt','','images/Button/Button Unternehmen.gif',1); parent.haupt.location.href='unternehmen.html';"><img src="images/Button/Button Unternehmen.jpg" alt="Unternehmen - Button" name="Unternehmen" width="120" height="120" border="0" id="Unternehmen" /></a></td>
                <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakt','','images/Button/Button Loesungen.gif',1); parent.haupt.location.href='loesungen.html';"><img src="images/Button/Button Loesungen.jpg" alt="L&ouml;sungen - Button" name="L&ouml;sungen" width="120" height="120" border="0" id="L&ouml;sungen" /></a></td>
              </tr>
              <tr>
                <td height="122"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakt','','images/Button/Button Karriere.gif',1); parent.haupt.location.href='karriere.html';"><img src="images/Button/Button Karriere.jpg" alt="Karriere - Button" name="Karriere" width="120" height="120" border="0" id="Karriere" /></a></td>
                <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakt','','images/Button/Button Kontakt.gif',1); parent.haupt.location.href='kontakt.html';"><img src="images/Button/Button Kontakt.jpg" alt="Kontakt - button" name="Kontakt" width="120" height="120" border="0" id="Kontakt" /></a></td>
              </tr>
            </table></td>
          </tr>

          </table></td>
        </tr>
    </table></td>
    <td width="273" rowspan="2" bgcolor="#FFFFFF"><table width="220" height="406" border="0" align="center">
      <tr>
        <td width="210" height="402"><img src="images/Bilder/index1.jpg" width="267" height="400" /></td>
        </tr>
    </table></td>
  </tr>

  <tr>
    <td height="182" bgcolor="#FFFFFF"><iframe src="willkommen-inhalt.html" style="border:0px #13235b dotted;" name="haupt" scrolling="auto" frameborder="1" align=aus marginheight="0px" marginwidth="0px" height="180" width=99%></iframe></td>
  </tr>
  <tr>
    <td height="21" colspan="2" bgcolor="#FFFFFF"><table width="113" height="19" border="0" align="center">
      <tr>
        <td width="50"><h5><a href="willkommen-inhalt.html" target="haupt">Start</a></h5></td>
        <td width="53"><h5><a href="impressum-inhalt.html" target="haupt">Impressum</a></h5></td>

        </tr>
    </table></td>
  </tr>
</table>
</body>
</html>
29 Apr 2009 22:27
Tommy-GER-
Mitglied

BeitragHallo Moderator ... Antworten mit Zitat

... warum stehe ich jetzt als Gast da ?
Zu Werner, hier der Gast, war mein letzter Artikel, irgendwas hat meinen Namen nicht mitgespeichert.
29 Apr 2009 22:37
Benutzer-Profile anzeigen Private Nachricht senden
Werner
Homepage-Total.de
Moderator

Beitrag Antworten mit Zitat

Der Fehler muss in diesem JS liegen, aber wo Sad ?

Hier ein alternatives Beispiel:
Code:

<a href="#"
 onMouseOver="pic1.src='\images\Button\Button Karriere.gif'; parent.haupt.location.href='karriere.html'; index.src='images/Bilder/index2.jpg';"
 onMouseout="pic1.src='\images\Button\Button Karriere.jpg';">
 <img name="pic1" src="\images\Button\Button Karriere.jpg" border="0">
</a>

...<hr>

<iframe src="willkommen-inhalt.html" style="border:0px #13235b dotted;" name="haupt" scrolling="auto"
frameborder="1" align=aus marginheight="0px" marginwidth="0px" height="180" width=99%></iframe>

...<hr>
<img name="index" src="images/Bilder/index1.jpg" width="267" height="400" />

_________________
Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt
01 Mai 2009 14:49
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
axinio Internet Marketing
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    Webmaster Forum -> Hilfe für Webmaster -> Javascript Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  

Ähnliche Beiträge
Thema Webmaster Forum Antw. Autor Verfasst am
Keine neuen Beiträge Wagerechte slideshow mit mouseover Hilfe für Webmaster 0 KlausD 29 Aug 2011 20:28 Letzten Beitrag anzeigen
Keine neuen Beiträge Div - Layer aus einem iframe mit Link... Javascript 1 Geiseltaler 02 März 2011 20:23 Letzten Beitrag anzeigen
Keine neuen Beiträge Diashow: Bilder mit unterschiedlichen... Javascript 2 benito 13 Feb 2011 12:57 Letzten Beitrag anzeigen
Keine neuen Beiträge hover-mouseover-effekt? Javascript 0 hischa 29 Nov 2010 11:52 Letzten Beitrag anzeigen
Keine neuen Beiträge Problem iframe Bildergallerie "g... Hilfe für Webmaster 0 ebi 23 Aug 2010 15:36 Letzten Beitrag anzeigen