JS ROLLOVER: Bitte um Hilfe

[pizko]

Hi Leute Ihr seid meine letzte Hoffnung:

Ich habe folgendes ein ROLLOVER GIF

 <input
type="image"
src="templates/xtc4/img/header.gif"
onClick="location.href='http://www.verdammt.de/index.php'"
onmouseover="this.src='templates/xtc4/img/mouseover_header.png'"style="cursor:hand"
onmouseout="this.src='templates/xtc4/img/header.gif'"
/>

und folgendes:

<table id="Tabelle_01" width="1030" height="138" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="Bilder/Unbenannt-1_01.png" width="211" height="138" alt=""></td>
        <td>
            <img src="Bilder/Unbenannt-1_02.png" width="819" height="138" alt=""></td>
    </tr>
</table>

Wie bekomme ich das zweite in onmouseover vom ersten???
EIn animiertes Gif soll bei mouseover in die beiden Bilder aufgesplittet werden.

GEHT DAS???

</div>

EDIT:
Keiner nen Plan? Sind alle im Freibad verstehe

 

[Efchen]

Keinen Plan.
Aber nicht wil ich im Freibad gewesen wäre, sondern weil ich mir nicht bildlich vorstellen kann, wo die drei Images jetzt stehen und was genau passieren soll.

Aber ist das nicht eigentlich ein Thread, der schon woanders läuft?

 

[pizko]

Richtig erkannt.. aber hier sind die Experten in Sachen Javascript gefragt.

Ok nochmal: Ich habe ein Gif: ein vorbei fahrender Zug.. von links nach rechts = eine Animation.

So jetzt möchte ich mit der mouse auf die linke Seite des Gifs gehen und es soll sich ein anderes Bild öffnen: MOUSEOVER

ICH geh wieder raus: MOUSEOUT -> Das gesamte Gif (zur Erinnerung es ist ein Ausgangsbild) soll nochmals von neuem ablaufen.

So das selbe möchte ich für die rechte Seite! Nur ein anderes Bild. Und ich möchte zu den Rollover Bildern unterschiedliche Linkziele vergeben.

VARIANTE: AUSGANGSGIF -> NUR EIN ROLLOVER BILD, aber ZWEI LINKS ( links und rechts)

Hoffe jetzt gehen paar Lichter auf.. also bei mir gehen Sie langsam aus;;;)))

Danke für Eure Mühe

 

[ingoS]

All das funktioniert mit dem, was ich in dem alten Thread (zugegebenermaßen häppchenweise in mehreren Beiträgen, also vielleicht nicht ganz übersichtlich) schon geschrieben habe:
Du verwendest die Methode der verweis-sensitiven Grafik und legst zwei areas auf das Ausgangsbild. Deren Koordinaten misst du so aus, wie ich es hier beschrieben habe (auch mal auf den SelfHtml-Link dort klicken;)):
http://www.html.de/html-und-xhtml/20306-langes-gif-zwei-mouseover-einteilen-3.html#post162976
Du verlinkst die areas auf die Seiten, die du verlinken willst.
Außerdem fügst du in <area href="..."...> noch das hinzu, was auf den folgenden Seiten für <a href="..."...> erklärt ist:
Kurzanleitung Roll-Over-Grafiken einbauen
SELFHTML: JavaScript / Anwendungsbeispiele / Dynamische grafische Buttons
Rollover Buttons Variantionen mouseover JavaScript Beispiel Download
Die Technik ist überall so gut wie identisch; welche Erklärung dir besser liegt, ist deine Sache. ;)
Mit dieser Methode brauchst du nur zwei Bilder.

 

[pizko]

Hi Alex,

Danke, dass du hier nochmal drauf eingehst. Ich bin gestern nicht mehr durchgestiegen...

Also ich bin jetzt an dieser Stelle (alles vermessen: Map steht soweit):

   <p>
  <img src="/templates/xtc4/img/kleidung.gif" alt="Header" usemap="#Headerlogo">
  <map name="Headerlogo">
    <area shape="rect" coords="0,0,214,136"
    
          href="http://index.php/" alt="Zu unserem Unternehmensprofil" title="Hier öffnet ein PopUp, der Sie auf unsere 'Über Uns' Seite führt">
    <area shape="rect" coords="215,0,637,136"
          href="index.php" alt="Startseite" title="Hier gelangen Sie wieder zur Hauptseite">
    </map>
</p>

Soweit funkt alles - nur an welcher Stelle baue ich jetzt das EINE ROLLOVERBILD ein? Also JS im header ist klar aber in diesem code wo muss da was rein? Man hat da ja sowas:

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','bbbbbbbbbbbbbbb',1)"><img src="aaaaaaaaaa" name="Image20" border="0" id="Image20" /></a>

</div>

Ich frage weil man ja zwei AREAs hat -> Es sind zwei verschiedene Rollover Bilder oder?

</div>

 

[ingoS]

Es sind nicht zwei Rolloverbilder.
Ich habe mich allerdings auch ein wenig vertan; die Codes, die ich dir gegeben habe, helfen nicht.

Folgendes hingegen funktioniert:
Das Bild braucht eine ID, z.B. id="aufmacher" oder so.
Füge in beide areas ein onMouseOver ein, mit dem du über getElementById auf das Bild zugreifst:

onmouseover="document.getElementById('aufmacher').src='rolloverbild.gif';"

Damit sich das Bild wieder zurückändert, wenn du nicht mehr mit der Maus drüber bist, brauchen auch beide ein onMouseOut:

onmouseout="document.getElementById('aufmacher').src='normalesbild.gif';"

Das sollte funktionieren.

 

[pizko]

soweit verstanden, aber es muss doch auch was in header oder?

Im Vergleich: wenn man etwas ausrichten will:

<script type="text/javascript">
function Ausrichten (wie) {
  document.getElementById("unentschlossen").align = wie;
}
</script>

Oder muss man das in meinem Fall nicht
</div>

EDIT:
Also ich bin jetzt hier angelangt:

Im head steht: QUELLTEXT

<script language="JavaScript">
<!--
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0)
{ rollover = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 4.0)
{ rollover = 'true'; }
else { rollover = 'false'; }
if (rollover == 'true') {
grafik1=new Image();grafik1.src="/img/Startseite.png";
grafik2=new Image();grafik2.src="/img/Unternehmensprofil.png";
}
function rein1(img,ref) { if (rollover == 'true') { document.images[img].src = ref; } }
function raus1(img,ref) { if (rollover == 'true') { document.images[img].src = ref; } }
//-->
</script>

im body steht:

QUELLTEXT
 <p>
  <img src="kleidung.gif" alt="" usemap="#Headerlogo">
  <map name="Headerlogo">
    <area shape="rect" coords="0,0,214,136"
    href="www.schießmichtot.de"
onMouseOver="document.getElementById('aufmacher').src='/img/Unternehmensprofil.png';"
onMouseOut="document.getElementById('aufmacher').src='/img/Kleidung.png';">

Kein Plan was da fehlt bzw. falsch ist -> Fehlermeldung
Fragen über Fragen:
Muss document.getElementById .src im head aufgeführt werden?
Hab unbenutzte Funktionen wie function rein1(img,ref) { if (rollover == 'true') { document.images.src = ref; } }
function raus1(img,ref) { if (rollover == 'true') { document.images[img].src = ref; } } im header... Müssen die raus?
usw

 

[ingoS]

Der komplette JavaScript-Teil im head rührt noch von meiner ersten fehlerhaften Annahme her und kann raus.

Dein Fehler ist, dass es keine ID im img-Tag gibt, auf die sich getElementById beziehen könnte.
Du musst schon noch id="aufmacher" in <img...> einfügen; auch JavaScript kann nicht raten. ;)

EDIT: Ich habe mal deine Doppelposts zusammengefügt; die solltest du in Zukunft bitte unterlassen -- besonders, wenn du damit lediglich deinen Beitrag hochschieben willst, sei er dir auch noch so wichtig, denn wichtig sind allen anderen ihre Beiträge auch.

 

[pizko]

Sorry wegen der DOppelposts! Ich habs nur mehrmals versucht und daher war mein Ausgangspunkt immer etwas anders: Nächstes mal benutze ich edit.

Muss es dann so aussehen?:

<p>
  <img src="kleidung.gif" alt="" usemap="#Headerlogo" id="aufmacher">
  <map name="Headerlogo">
    <area shape="rect" coords="0,0,214,136"
    href="www.schießmichtot.de"
onMouseOver="document.getElementById('aufmacher').src='/img/Unternehmensprofil.png';"
onMouseOut="document.getElementById('aufmacher').src='/img/Kleidung.png';">

 

[ingoS]

Genau so muss es aussehen -- du solltest natürlich noch .png durch .gif ersetzen und den Unterschied zwischen Groß- und Kleinschreibung der Dateinamen beachten. ;)

Ich hoffe, ich konnte dir helfen und es klappt endlich -- wäre dann nämlich eine erfreuliche 2000-Beiträge-Feier. :mrgreen: ;ugl ;Jump

 

[pizko]

Ja Gratulation: 2000 ist schon eine Menge Schreiberei.. Hast bestimmt viele Menschen glücklich gemacht;)

Also soweit klappt alles bis auf, dass das RECHTE Mouseover Bild von links an angezeigt wird. Es missachtet seine Position.. Bei der Bundeswehr gäbe es zwei Wochen Arrest für so ein Verhalten.. Kannst du dir das erklären?

<area shape="rect" coords="214,0,852,136"
          href="http://www.***********.de/index.php" alt="Die Startseite" title="Hier gelangen Sie wieder zur Hauptseite des Outlets" onMouseOver="document.getElementById('aufmacher').src='http://*****.de/templates/xtc4/img/Startseite.gif';"
onMouseOut="document.getElementById('aufmacher').src='/templates/xtc4/img/onlineshop_fuer_kleidung.gif';">
    </map>
</p>

</div>

 

[ingoS]

Also soweit klappt alles bis auf, dass das RECHTE Mouseover Bild von links an angezeigt wird. Es missachtet seine Position.. Bei der Bundeswehr gäbe es zwei Wochen Arrest für so ein Verhalten.. Kannst du dir das erklären?

Wen ich mit meiner Schreiberei wie glücklich gemacht habe, variiert, glaube ich, stark von Fall zu Fall. :mrgreen: ;ugl

Jetzt noch einmal: Du brauchst kein rechtes und linkes Mouseover-Bild. Wirklich nicht. :roll:
Du brauchst nur
1. das Bild, das angezeigt wird, wenn man nicht mit der Maus drüber ist, mit img eingebunden und
2. das in zwei Bereiche eingeteilte Bild, das gezeigt werden soll, wenn man mit der Maus drüber geht, am Stück, komplett, beide Bereiche in einem Bild, so, wie es am Anfang war in onmouseover und onmouseout.
Du nimmst zwei areas (hier ist die Einteilung in zwei, nicht im Bild) und stattest sie beide mit den gleichen onmouseover- und onmouseout-Angaben aus.

Die areas funktionieren wie Links, die über dem Bild liegen. Das Bild wird durch onmouseover ausgewechselt, die areas bleiben. So hat man zwei Bereiche mit verschiedenen Links über einem Bild.

 

[pizko]

ahhhhhhhhhh okkkk jettzt haben wir uns endgültig verstanden ;)
Eine Frage: Javascript ist der Grund warum nichts in den Header muss oder?? Also was jetzt mouseover betrifft.. Ist gleich viel angenehmer. Ich will es unbedingt lernen.. sagmal wie hast du das hier gelernt - alles selbst beigebracht wie ich es vorhabe oder eine ausbildung?

Andere Frage warum erkennt er nur gif? Ich habe jetzt einfach mal meine pngs als gif umbenannt. Gibts da evtll Probleme - sollte ich sie gleich als gif abspeichern? Das ganze Mouseoverbild erkennt er als png!

 

[ingoS]

Ich kann eigentlich überhaupt kein JavaScript; das bisschen, was ich dir jetzt erzählt habe, habe ich mir von SelfHtml zusammengeklaubt.

Das im header war auch JavaScript; du kannst dort z.B. eine Funktion definieren, damit der ganze Kram nicht so unübersichtlich im onmouseover steht, wenn es denn ein bisschen mehr Code ist als die kleine Zeile, die wir hier haben.

Grafiken wandelst du nicht um, indem du sie einfach umbenennst; daran könnte es liegen. Vielleicht sind die Grafiken aber auch noch nicht richtig hochgeladen oder verlinkt.
Warum du aber .gif-Dateien in .png-Dateien umbenennen willst, verstehe ich überhaupt gar nicht.

 

[pizko]

Warum du aber .gif-Dateien in .png-Dateien umbenennen willst, verstehe ich überhaupt gar nicht.

Weil du geschrieben hattest wandel png in gif um.. Ist auch nicht so wichtig.. bin ;Jump dass wir es hinbekommen haben.. ohne dich wäre ich aufgeschmissen gewesen. Ich hab mir vorgenommen, falls mein Projekt ein bisschen Fahrt aufnimmt und ich zufrieden sein kann, dass ich jedem der mir geholfen hat eine Flasche Wein zukommen lassen werde. Also auch dir. Ich halte immer für mich wichtige Versprechen.. ich hoffe du trinkst wein;) Kann noch bisschen dauern aber ich arbeite dran.. Danke dir auf jeden Fall erstmal.. und bis die Tage

 

[ingoS]

Eine Flasche Wein für jeden Helfer? Da kannst du natürlich ruhig öfter hier vorbei kommen und nachfragen. :mrgreen: ;ugl
Ich mit meinen 18 Jahren trinke natürlich alles mögliche, das Alkohol enthält, aber bei Wein kommt es dann doch ein bisschen darauf an, was für Wein es ist -- damit meine ich natürlich nicht dessen Preis oder Qualität. :mrgreen:

Ein bisschen weiterführende Hilfe: Lass noch mal einen guten Designer (also nicht mich^^) ein Auge auf die Seite werfen; damit will ich nicht einfach nur das aktuelle Aussehen abwerten, sondern eben helfen, die Seite besser zu machen. ;)

Und vergiss nicht, das fertige Werk bei uns im Websitecheck bewerten zu lassen; da kommen eigentlich immer viele hilfreiche Tipps zusammen. :)