Bild und href des Bildes ändern über Javascript

T

Tobi1309

Grünschnabel
Hallo zusammen,

beim Mitlesen im Forum habe ich schon viele hilfreiche Antworten gefunden allerdings stehe ich jetzt vor einem Problem wo ich nicht weiter komme.

Ich möchte über ein onclick Event sowohl ein Bild als auch die href des Bildes ändern.

Das mit dem Bild ändern klappt schon ganz gut über:

Code: 
<script language="JavaScript" type="text/javascript">

var PictureDB;
PictureDB = new Array("images/woq_identify.png", "images/woq_select.png", "images/woq_define.png", "images/woq_executeclose.png", "images/placeholder.png");

function ChangePicture(nr)
{
  if (document.images)
  {
   document.changePic.src = PictureDB[nr];
  }
}
</script>


Der HTML Code sieht folgendermaßen aus:
HTML: 
<img src="images/placeholder.png" name="changePic" id="changePic" border="0">

und

HTML: 
<a href="#" onclick="javascript: ChangePicture('0');">

Ich dachte mir ich mache jetzt das selbe mit den Links:

Code: 
<script language="JavaScript" type="text/javascript">
var HrefDB;
HrefDB = new Array("http://www.gmx.de", "http://www.google.de", "http://www.yahoo.de", "http://www.alternate.de", "http://www.gmx.de");

function ChangeHref(id)
{
  if (document.links)
  {
   document.changeHr.href = HrefDB[id];
  }
}
</script>

und ändere meinen HTML Code folgendermaßen:

HTML: 
<a target="_blank" id="changeHr" name="changeHr" href="#"><img src="images/placeholder.png" name="changePic" id="changePic" border="0"></a>
und

HTML: 
<a href="#" onclick="javascript: ChangePicture('0'); ChangeHref('0')">


leider klappt das nicht so ganz. Bilder wechselt er immer noch aber der Link bleibt "#".

Wäre über jede Hilfe dankbar.
 
Hi,

du kannst die Änderungen in einer Funktion zusammenfassen.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<script type="text/javascript">
var PictureDB = new Array("bild1.jpg", "bild2.jpg", "bild3.jpg", "bild4.jpg", "bild5.jpg"),
    HrefDB = new Array("http://www.gmx.de", "http://www.google.de", "http://www.yahoo.de", "http://www.alternate.de", "http://www.gmx.de");

function ChangePicture(nr){
    var img = document.getElementById('changePic'),
        link = document.getElementById('changeHr');

    if(img){
        img.src = PictureDB[nr];
    }
    if(link){
        link.href = HrefDB[nr];
    }
}
</script>
</head>
<body>
<a href="#" onclick="ChangePicture('1'); return false;">upsa</a>
<a target="_blank" id="changeHr" name="changeHr" href="#"><img src="images/placeholder.png" name="changePic" id="changePic" border="0"></a>
</body>
</html>
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück