Hi,

Ich würde gerne einen Newsbereich machen, ähnlich dem hier. Dafür möchte ich, dass ein Bild angezeigt wird, worunter man dann über verschiedene Texte fahren kann, woraufhin sich die verschiedenen Bilder öffnen.

Kann man das mit Css machen? Ansonsten kann mir vielleicht jemand dabei helfen das mit Java Script zu verwirklichen?

Vielen Dank!!

Hallo Tripwire,

das kannst du recht easy mit JavaScript realisieren. Hier mal auf die Schnelle ein Code-Snippet (ungetestet):

PHP-Code:


<script type="text/javascript">
    function changeImage(sSrc)
    {
        document.getElementById('mein_bild').src = sSrc;
    }
</script>

<img src="pfad_zum_ersten_bild" border="0" alt="Bildbeschreibung" id="mein_bild" />

<p><font onmouseover="changeImage('pfad_zum_bild1');">Text1</font> - <font onmouseover="changeImage('pfad_zum_bild2');">Text2</font> - <font onmouseover="changeImage('pfad_zum_bild3');">Text3</font></p> 


Gruß
Spooner

hey,

vielen Dank schonmal! Script läuft aber leider noch nicht ganz, das Bild wechselt nicht.

Zitat von Tripwire

hey,

vielen Dank schonmal! Script läuft aber leider noch nicht ganz, das Bild wechselt nicht.

Hast du auch den "Pfad" angepasst ?

ja klar. hab ich .

Moin,

dann müssen ein paar mehr Infos her. Browser und so, am besten Deine Testseite irgendwo online, dass wir dort den Fehler suchen können.

Ich würde trotzdem gerne Manöverkritik formulieren: Ich würde im HTML auf FONT-Tags verzichten, die sind Relikt alter Zeit und verführen dann doch zu Mischmasch aus FONT- und CSS-Gestaltung. Sinnvoll wäre dort SPAN. Auch unterstützt FONT laut SelfHTML das Event-Universalattribut OnMouseOver nicht - vielleicht erklärt das bereits das Problem?

Das das JavaScript mit IE4 und Netscape4 nicht funktionieren wird kann man heutzutage wohl hinnehmen, oder? Ansonsten könnte man das noch per Abfrage absichern:

if (document.getElementById) { document.getElementById('mein_bild').src = sSrc; }

Auch schlau wäre es, der Funktion nicht nur die Bild-URL sondern auch die ID zu übergeben, damit man den Bildwechsler mehrfach auf der Seite verwenden kann:

<script type="text/javascript">
    function changeImage(sId,sSrc)
    {
        if (document.getElementById) {
            document.getElementById(sId).src = sSrc;
        }
    }
</script>

<img src="pfad_zum_ersten_bild" border="0" alt="Bildbeschreibung" id="mein_bild" />

<p><span onmouseover="changeImage('mein_bild','pfad_zum_bild1');">Text1</span> - <span onmouseover="changeImage('mein_bild','pfad_zum_bild2');">Text2</span> - <span onmouseover="changeImage('mein_bild','pfad_zum_bild3');">Text3</span></p>

Grüße,
Thorsten

Deswegen sagte ich auch "auf die schnelle in Code-Snippet". Ein wenig mitdenken bzw. weiterdenken muss er schon selber

Gruß

tut mir leid, dass ich nochmal stören muss, bekomme es aber nicht hin, kenne mich mit JS gar nicht aus, versuche normalerweise es zu meiden.

Perfekt wäre ein ganz fertiger Code, den man nur noch abändern muss.

Aber ich werde nachher mal den Test Schnippsel hochladen..

Schon mal vielen Dank,
daniel

Zitat von Tripwire

Perfekt wäre ein ganz fertiger Code, den man nur noch abändern muss.

Ähm, was da steht, das ist doch schon sowas. Gut, ich habe noch ein paar Verbesserungen vorgenommen, aber ohne dass wir Deinen Code sehen, was genau sollen wir da exakter, "fertiger" vorgeben? Was wir bisher geliefert haben ist so weit, dass Du das problemlos verwenden kannst, wenn es nicht funktioniert können wir nur anhand Deines Codes den Fehler suchen...

Ich bin ja sowieso der Meinung, dass man immer versuchen muss zu verstehen, was man da verwendet, oder wenn man das nicht will, dass man dann seine Wünsche und Ansprüche zurückschrauben muss. Sich von anderen Leuten/irgendwelchen Websites diverse Schnipsel zusammen zu basteln, die man nicht begreift, das führt nur zu fehlerhaften Webseiten, die zum Weglaufen sind. Testest Du wenigstens in verschiedenen Browsern?

Ratlos,
Thorsten

hey,

hast recht muss mich unbedingt mal mit JS auseinandersetzten.

Hab es jetzt aber auch hinbekommen ich bin soo doof und hab noch die id des Bildes mitgeändert.

Nja, vielen Dank für eure Zeit.