Mousover effekt austauchen von bild und text @ tutorials.de: Tutorials, Forum & Hilfe

lubino · 13.10.05 19:47

hallo erstmal.

sicher wurde es hier schon einmal ausgiebig beschrieben aber ich hab in den unter 6000 einträgen nicht finden können.

ich brauche einen einfachen script der mir erlaubt, mit dem mousover effekt bild und text auszutauschen. bisher ist es mir nur mit bild in bild möglich.

beschreibung meiner arbeit: das sind meine navigations punkte... mit text davor der sich mit bild ändert wenn ich mit der maus drüber fahre

Hallo <--- IXI IOI IXI IXI oder Lustig <--- IXI IXI IOI IXI

wer hat ein tip wie man das macht. würde mich freun über einen script der vom <script language="javascript"> bis </script> weil ich bin noch ein relertiver javaneuling. vieleicht bekommt man was mit div hin wo bild und text zusammen in einer ebene sich austauschen.

ich bin gespannt

Da Hacker · 14.10.05 05:45

Herzlich Willkommen im Forum, lubino!

Mir ist nur die Möglichkeit bekannt, mit PHP Text auszutauschen. Wenn du Javascript dafür benutzen möchtest, dann kannst du zu den Formular-Objekten greifen. Also beispielsweise dieser Code:

Code :

<html>
<head>
<title>Egal</title>
<script language='Javascript'>
function BildMouseOver()
{
document.imgBildchen.src='MouseOverBild.jpg';
document.Formular.txtText1.value='Hier steht der MouseOver-Text';
}
function BildMouseOut()
{
document.imgBildchen.src='MouseOutBild.jpg';
document.Formular.txtText1.value='Hier steht der normale Text';
}
</script>
</head>
<body>
<a onmouseover='BildMouseOver()' onmouseout='BildMouseOut()'>Bitte hier mit der Maus dr&uuml;ber fahren</a><br>
<img name='imgBildchen' src='MouseOutBild'></img><br>
<Form name='Formular'>
<input name='txtText1' type='text' size='40' value='hier steht der normale Text'></input>
</Form>
</body>
</html>

Für Erklärungen stehe ich gerne bereit - nachdem ich geschlafen habe

Ich hoffe, ich konnte dir helfen.

AHH! Mein 500ster Beitrag - ENDLICH

Ciao:
Da' Hacker

BSA · 14.10.05 05:47

Ui, mit PHP kannst du Text austauschen? Also so wie Bilder mit JS? Das wäre mir neu!

Da Hacker · 14.10.05 05:54

Hi BSA,

ach nicht?

Naja, muss dann wohl die Müdigkeit sein.

Ich hoffe dennoch, dass mein Tipp etwas gebracht hat.

Gute Nacht:

Da' Hacker

BSA · 14.10.05 05:57

Sowas kann mit PHP nicht möglich sein, da PHP eine Serverseitige Spache ist und keine Clientseite, das heißt um etwas mit PHP zu machen, muss erst eine Anfrage (ein Script) an den Webserver gesendet werden sodass der das dann zurücksendet, das heißt also sobald du irgendwann mal was siehst was auf irgendwas sofort reagiert (mit Maus drüber fahren oder ähnliches) kann es nicht mit PHP gemacht sein!

Sven Mintel · 14.10.05 09:44

Packe den Text in irgendein Element, gebe dem Element eine ID.....dann kannst du ihn bequem austauschen:

Code :

1	document.getElementById('idDesElementes').firstChild.data='anderer Text';

lubino · 14.10.05 18:05

Danke Da Hacker das du 05:45 noch eine Lösung gefunden hast.
leider kann ich damit recht wenig anfangen. weder das Bild tauscht sich aus noch der Text... vieleicht wär eine etwas ausgeschlafenere Lösung besser!

Leider bin ich noch ein Java-Neuling und kann mit Script-Fragmenten wie "document.getElementById('idDesElementes').firstChild.data='anderer Text';" nur bedingt was anfangen. ein Link mit beschreibung würde mir viel rätselraten ersparen

und nochmal ich möchte das sich Bild und Text mit dem Mousover-Effekt austauschen lassen.

Vieleicht weis einer wie das geht oder wo man nachlesen kann....

Sven Mintel · 15.10.05 02:03

naja....ich denke das mit dem Bild hast du schon...zumindest hast du das gesagt:
Zum Text:

Code :

1	document.getElementById('idDesElementes').firstChild.data='anderer Text';

"idDesElementes" ....ist die ID des Elementes, welches den Text beinhaltet.
"anderer Text" ....ist der Text, der in diesem Element erscheinen soll

Packe bspw. ein <span>-Element an die gewünschte Stelle:

Code :

1	<span id="idDesElementes">Originaltext</span>

...gebe die Anweisung von oben....und dann steht da "anderer Text" drinnen

lubino · 19.10.05 23:03

ich habe ein kleines problem mit einem javascript, es soll das bild und den text vor dem bild mit MOUSOVER ändern wie z.b. so :

1. alt [X][X][X][X]

2. neu [X][X][O][X]

das hab ich auch hinbkommen mit

Code :

<a href="#"onMouseOut="document.getElementById('a')
.firstChild.data='alt';"MM_swapImgRestore()"
 onMouseOver="MM_swapImage
('Image1','','BILDER/nav2_low.gif',1)
;document.getElementById('a')
.firstChild.data='neu';">
<img src=.....></a>
<div id="a">neu</div>

aber jetzt bleibt das bild stehen wenn ich mit der maus runtergehe.

3. alt [X][X][O][X]

ich möchte aber

3. alt [X][X][X][X]

wer kann helfen? freu mich auch über mails an mich

Tucker · 16.01.06 22:02

Zitat von Sven Mintel

naja....ich denke das mit dem Bild hast du schon...zumindest hast du das gesagt:
Zum Text:

Code :

1	document.getElementById('idDesElementes').firstChild.data='anderer Text';

"idDesElementes" ....ist die ID des Elementes, welches den Text beinhaltet.
"anderer Text" ....ist der Text, der in diesem Element erscheinen soll

Packe bspw. ein <span>-Element an die gewünschte Stelle:

Code :

1	<span id="idDesElementes">Originaltext</span>

...gebe die Anweisung von oben....und dann steht da "anderer Text" drinnen

Ich nutze deinen Vorschlag nun auch, um Bilder und Text auszutauschen. Funktioniert alles wunderbar, aber einen langen Text tauscht es mir nicht aus.
Hier das JS:

Code :

function wechselBild(imgName, imgSrc, titel, beschreibung, urheber) 
{
  if (document.images)
  {
    if (imgSrc != "none")
    {
      document.images[imgName].src = imgSrc;
    }
  }
 if (titel != "none")
  {
    document.getElementById('titelid').firstChild.data=titel;
  }
  else
  {
    document.getElementById('titelid').firstChild.data=' - ';
  }
  if (beschreibung != "none")
  {
    document.getElementById('beschreibungid').firstChild.data=beschreibung;
  }
  else
  {
    document.getElementById('beschreibungid').firstChild.data=' - ';
  }
  if (urheber != "none")
  {
   document.getElementById('copyrightid').firstChild.data=urheber;
  }
  else
  {
    document.getElementById('copyrightid').firstChild.data=' - ';
  }
}

Und hier ein Beispiel für ein auslösendes onClick- Event:

HTML-Code:

<a href="#bild" onClick="wechselBild('austausch', 'gallerie/9/Bild_024.jpg', '&Uuml;berflieger', 'Das war eine ganz lustige Angelegenheit in der Halle, da dort ein ...', 'Carsten Beeg')"><img src="gallerie/9/thumbnails/Bild_024.jpg" width="100" height="66"></a>

Es kommt eine Fehlermeldung, dass das Objekt bei beschreibung im Javascript oben, kein Objekt wöre oder null.
Kann mir da nun mit meinem echt mageren WIssen selber nicht mehr weiter helfen.

lubino · 16.01.06 22:12

Ich hab eigendlich auch keine Probleme mit längeren Texten.
Ich hab den Inhalt bzw. den Text in einer Ebene (Layer)
und über eine CSS Datei definiert.
Schau Dir den Code auf www.bluesky-ad.de mal an

Tucker · 16.01.06 22:28

Hildt mir nicht wirklich weiter, da ich absoluter bin und da nicht durchsehe.

Sven Mintel · 18.01.06 00:03

Ich habe deinen Code getestet, und er funktioniert fehlerfrei.... der Bug liegt somit nicht in dem von dir geposteten Code.
Wo er begraben ist, könnte man evtl. ausmachen, wenn du den genauen Text der Fehlermeldung postest und nicht deine freie Übersetzung desselben.

Tucker · 18.01.06 12:06

Also bei Opera zeigt mir die JavaScript- Konsole folgenden Fehler an:

SSV Lommatzsch 1923 e.V.
http://www.ssvlommatzsch.de/index.ph...e=3&gallerie=9
Event thread: click
Error:
name: TypeError
message: Statement on line 31: Could not convert undefined or null to object
Backtrace:
Line 31 of inline#1 script in http://www.ssvlommatzsch.de/index.ph...e=3&gallerie=9
(document.getElementById("beschreibungid")).firstChild.data = beschreibung;
Line 1 of script
wechselBild("austausch", "gallerie/9/Bild_018.jpg", "Trainer Halwaß", "Sieht man mal, mit wieviel Ernst ein Trainer an den Sprint gegangen ist, wenn noch Kraft bleibt, um die Mundwinkel so weit hoch zum grinsen zu ziehen.", "Carsten Beeg");
At unknown location
[statement source code not available]

Sven Mintel · 18.01.06 12:31

Code :

1	<div id="beschreibungid"></div>

Das ist der Fehler: firstChild verrweist auf den ersten Kindknoten dieses <div> ....nur steht da nichts drinnen-->das <div> ist leer

Packe dort zumindest ein   hinein.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Bild mit Mousover in <div>-Tag

Tabelle mit Mousover Effekt hinterlegen

Mousover (text) => Bild einblenden.

bei Text mousover Bild anzeigen (Vorschau)

Mousover Bild -> Textausgabe in Textfeld

E-Mail:

Abonnieren Abbestellen