Javascript Mouseover Effekt

Fragen zu allen Themen rund ums Programmieren außerhalb von phpBB können hier gestellt werden - auch zu anderen Programmiersprachen oder Software wie Webservern und Editoren.
RPS
Mitglied
Beiträge: 35
Registriert: 29.08.2004 12:26
Kontaktdaten:

Javascript Mouseover Effekt

Beitrag von RPS »

Also ich habe folgendes, eigendlich einfaches Problem:
Nehmen wir mal an, ich habe einen jpg Banner auf der Seite, und möchte, dass ein anderer Banner angezeigt wird, wenn man mit der Maus darauf ist?

Vielen Danks schonmal! :grin:
Benutzeravatar
Andy120
Mitglied
Beiträge: 3430
Registriert: 02.01.2004 11:21
Wohnort: Basel (Schweiz)
Kontaktdaten:

Beitrag von Andy120 »

Ich denke du suchst sowas...
Füge das folgende Script in den body-Bereich deiner HTML-Datei ein:

<SCRIPT LANGUAGE="JavaScript">
<!-- ... Quelle Dummy ...
function show_image()
{
alert("Diese Funktion ben&ouml;tigt JavaScript1.1!")
}

// ... Ende Dummy ... -->

</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.1">

<!-- ... Quelle Beispiel ...

// Vorabladen der Bilder
NumberImg = new Array()

for(var i = 0; i < 4; i++)
{
NumberImg = new Image()
NumberImg.src = "" + i + ".gif"
}

// Bild zeigen
function show_image(idx)
{
document.showimg.src = NumberImg[idx].src
}

// Bild zeigen
function hide_image()
{
document.showimg.src = NumberImg[0].src
}

// Dummy
function dummy()
{
alert("Hier wird keine Funktion ausgel&ouml;st. " +
"Die Wirkung des Beispiels ist allein durch das Betreten und Verlassen des Mauszeigers im Bereich des Verweises zu erkennen.")
}

// -->
</SCRIPT>


Um die entsprechenden Links und das Bild zu erzeugen musst du außerdem noch diesen Quelltext einfügen:

(Hier in Form einer Tabelle)


<TABLE BORDER=2 CELLPADDING=8 align="left" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF" style="border-collapse: collapse" bordercolor="#111111" cellspacing="0">
<TR ALIGN=CENTER><TD COLSPAN=3><IMG NAME="showimg" SRC="0.gif" HEIGHT=64 WIDTH=64></TD></TR>
<TR><TD ALIGN=center WIDTH=96><BIG><A HREF="javascript:dummy()" onMouseOver="show_image(1)" onMouseOut="hide_image()">Eins</A></BIG></TD>
<TD ALIGN=center WIDTH=96><BIG><A HREF="javascript:dummy()" onMouseOver="show_image(2)" onMouseOut="hide_image()">Zwei</A></BIG></TD>
<TD ALIGN=center WIDTH=96><BIG><A HREF="javascript:dummy()" onMouseOver="show_image(3)" onMouseOut="hide_image()">Drei</A></BIG></TD></TR>
</TABLE>



Und so siehts aus...

http://www.ekiwi.de/kiwi/kiwi/jscriptht ... rafik6.php

Gruss, Andy
RPS
Mitglied
Beiträge: 35
Registriert: 29.08.2004 12:26
Kontaktdaten:

Beitrag von RPS »

thx, denke das ist das was ich suche. Aber ich verstehe das nicht so ganz. Kannst du vielleicht ein Beispiel machen, wie ich das bei einem Bild angeben müsste? thx!
Benutzeravatar
Pyramide
Ehrenadmin
Beiträge: 12734
Registriert: 19.04.2001 02:00
Wohnort: Meschede

Beitrag von Pyramide »

RPS
Mitglied
Beiträge: 35
Registriert: 29.08.2004 12:26
Kontaktdaten:

Beitrag von RPS »

thx, jetzt hab ichs kapiert! :)
Benutzeravatar
Eves21
Mitglied
Beiträge: 119
Registriert: 16.01.2005 14:03

Beitrag von Eves21 »

Hallo

<table width="85%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center" >
<tr>
<th height="25" colspan="8" class="thHead" nowrap="nowrap">HABER EVI</th>
</tr>
<tr>

<tr>
<!-- BEGIN show -->
<td class="row2" width="20%" align="center">
<span class="gensmall">{show.IMAGE}<br>{show.TITRE}<br>{show.U_INFO}</span></td>
<!-- END show -->

</tr>
</table>


so sieht meine tpl. datei aus,bei dem ich diesen Javascript Mouseover Effekt einbauen möchte..

Die Bilder + text bearbeite ich über mein AP..(habe den:show_image Mod)

Deshalb wüsste ich nicht wie es einbauen sollte/könnte :oops:

Kann mir jemand bitte helfen?

Danke :)
Benutzeravatar
Eves21
Mitglied
Beiträge: 119
Registriert: 16.01.2005 14:03

Beitrag von Eves21 »

Kann das wirklich niemand?? Oder ein Tipp? :roll:


Danke
Benutzeravatar
Pyramide
Ehrenadmin
Beiträge: 12734
Registriert: 19.04.2001 02:00
Wohnort: Meschede

Beitrag von Pyramide »

Dazu müsstest du den Mod anpassen, um das zweite Bild zu speichern
KB:knigge
Benutzeravatar
Eves21
Mitglied
Beiträge: 119
Registriert: 16.01.2005 14:03

Beitrag von Eves21 »

Hallo

ich habe diesen Mod als Beispiel gegeben weil ich auch noch viele ähnliche Mod habe bei denen ich ähnliche Mousover scripts einbauen möchte..

Nur jetzt bei dem Beispiel? Könntest du das erläutern? Wie mache ich das?

Danke
Benutzeravatar
Pyramide
Ehrenadmin
Beiträge: 12734
Registriert: 19.04.2001 02:00
Wohnort: Meschede

Beitrag von Pyramide »

  • Datenbankfeld für das zweite Bild einfügen
  • Die Anlegen/Bearbeiten/Löschen Formulare anpassen
  • Die Anzeigen-Seite anpassen
  • und natürlich die Template-Dateien anpassen
KB:knigge
Antworten

Zurück zu „Coding & Technik“