Bildwechsel beim klick auf einen Link

kappilino

Hi,

ich habe zwar schonmal einen Threat über das Thema verfasst aber keine richtige Hilfe erhalten.

Ich habe mir ein Menü gebaut. Über diesem Menü habe ich ein 200x200px großes Bild platziert. Ich möchte nun das beim klick auf einen der Menuepunkte dieses Bild wechselt.

Wie kann ich das am besten umsetzen, eher via php oder via Javascript oder mit einer ganz anderen Variante ?

Habe schon stundenlang gegooglet, aber nichts gefunden.

Wäre dankbar für eure Hilfe
kappilino

Greg10

nun es komtm drauf an wie dus haben willst...
mit php wärs sicher einfacher, aber es wäre halt ein seiten-wechsel bzw. reload von nöten
mit JS wär das nicht der fall dafür eine bisschen schwieriger zu realisieren

kappilino

Dann mit JS. Kennst du denn irgendwelche Beispiele und Wesites wo ich mir angucken kann wie ich das genau mache ? Hab nähmlich speziell dazu nicht wirklich was gefunden.

driver

javascript:

Code

function show(bild) {
document.getElementById('pic').innerHTML = "<img src='"+bild+"'/>";
}

aufruf:

Code

<a href="#" onmouseover="show('dateiname');">...</a>

wos erscheinen soll:

Code

<p id="pic"></p>

aber alles ungetestet

Greg10

ich würde eher dem bild die id pic geben und nur die url per .src bearbeiten

driver

auch möglich. ich nehm meist obrigens da ich nicht nur bilder dort platziere...

synaptic

drivers funktion kann man auch noch prima erweitern, indem man einen weiteren parameter in die funktion einbaut, nämlich die ID von dem objekt, wo des reingeschrieben werden soll...

an sich ergibt es auch sinn eine preload-schleife zu bauen, die ein array befüllt, damit die bilder ad hoc verfügbar sind

kappilino

Ja, vielen Dank für eure Hilfe. Es funktioniert. Nun würde ich aber gerne jedes Bild noch verlinken. Es bestände sicherlich die Möglichkeit anstatt eines <img...> ein <div> einzufügen aber evtl. geht es auch einfacher.

wäre cool wenn ihr mir nochmal helfen könntet:-)

synaptic

kannst du mal den code posten, der variabel sein soll?

letztlich ist drivers variante gut erweiterbar

zum beispiel so:

HTML

<html>


<head>
  <title></title>
  <script type="text/javascript">
  function show(bild, ziel, adresse) {
document.getElementById(ziel).innerHTML = "<a href='"+adresse+"'><img src='"+bild+"' /></a>";
}

  </script>
</head>


<body>
<a href="#" onmouseover="show('http://home.arcor.de/synaptic/adler.jpg','pic','http://forum-hilfe.de');">ins pic</a>
<br />
<a href="#" onmouseover="show('http://home.arcor.de/synaptic/adler.jpg','pic2','http://forum-hilfe.de');">ins pic2</a>
<p id="pic"></p>


<p id="pic2"></p>


</body>
</html>

Alles anzeigen

statt der P-Tags kannste da auch 'divs' oder 'spans' nehmen, muss halt nen container sein ...

kappilino

Vielen Dank für eure Hilfe. Hat alles super funktioniert.