✔ Mousover effekt austauchen von bild und text

L

lubino

Mitglied
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
 
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 :D

Ciao:
Da' Hacker
 
Hi BSA,

ach nicht? :confused:
:)

Naja, muss dann wohl die Müdigkeit sein.

Ich hoffe dennoch, dass mein Tipp etwas gebracht hat.

Gute Nacht: ;)
Da' Hacker
 
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!
 
Packe den Text in irgendein Element, gebe dem Element eine ID.....dann kannst du ihn bequem austauschen:
Code: 
document.getElementById('idDesElementes').firstChild.data='anderer Text';
 
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 :p 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....
 
naja....ich denke das mit dem Bild hast du schon...zumindest hast du das gesagt:
Zum Text:
Code: 
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: 
<span id="idDesElementes">Originaltext</span>

...gebe die Anweisung von oben....und dann steht da "anderer Text" drinnen
 
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
 
Sven Mintel hat gesagt.:
naja....ich denke das mit dem Bild hast du schon...zumindest hast du das gesagt:
Zum Text:
Code: 
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: 
<span id="idDesElementes">Originaltext</span>

...gebe die Anweisung von oben....und dann steht da "anderer Text" drinnen
Zum Vergrößern anklicken....


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: 
<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.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück