✔ javascript Bildvorschau als Link

NEW_IN_JAVA · 12. September 2011

Hi,

ich möchte genau so eine Bildvorschau haben wie auf dieser Seite

http://www.web-toolbox.net/webtoolbox/bilder/01-bildvorschau/bildvorschau04.htm

mit dem Unterschied das ich das große Bild(links) anklicken kann das dann zu einer externen Seite führt.

Je nach dem was man auswählt aus dem 9 Bilder - kann es zu 9 externen Seiten führen.

Könnt Ihr mir ein paar Tipps geben wie ich das am Besten angehe.

Code:

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Code:

<script type="text/javascript" language="JavaScript">
<!-- Begin

function swap(Bildname,BildURL)
{
document.images[Bildname].src=BildURL;
}

//  End -->
</script>

HTML:

<body onLoad="MM_preloadImages('vorlage.jpg','1.png', 'g4p.jpg','12.png', '21.png')">
<div id="apDiv6">

<table width="201"   border="0" cellpadding="0" cellspacing="1">
<tr>
<td>
<a href="javascript:swap('picture','section1.png')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bild4','','12.png',1)" ><img src="11.png" name="Bild4" width="200" height="127" border="0"></a>
</td>
</tr>

<tr>
<td>
  <a href="javascript:swap('picture','section2.png')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bild5','','22.png',2)" ><img src="21.png" name="Bild5" width="200" height="127" border="0"></a>
</td>
</tr>
</table>
<br>
<br>
</div>

<div id="apDiv8"><img name="picture" width="847" height="347" src="section1.jpg"></div>
</body>
</html>

tombe · 13. September 2011

Um ehrlich zu sein, ich habe mir deinen JS-Code nicht genau angeschaut. Denke aber das das unten so funktioniert wie du es haben willst.

HTML:

<script language="javascript" type="text/javascript">
function change(url, title) {
	document.getElementById("link").href = url;
	document.getElementById("bild").src = url;
	document.getElementById("bild").title = title;
}
</script>
<table border="0" cellpadding="1" cellspacing="1">
	<tr>
		<td rowspan="3"><a id="link" href="1.gif" target="_blank"><img id="bild" src="1.gif" title="Bild 1" width="200" style="border: 0px;" /></a></td>
		<td><img onclick="change(this.src, this.title);" src="1.gif" title="Bild 1" width="50" style="border: 0px;" /></td>
		<td><img onclick="change(this.src, this.title);" src="4.gif" title="Bild 4" width="50" style="border: 0px;" /></td>
		<td><img onclick="change(this.src, this.title);" src="7.gif" title="Bild 7" width="50" style="border: 0px;" /></td>
	</tr>
	<tr>
		<td><img onclick="change(this.src, this.title);" src="2.gif" title="Bild 2" width="50" style="border: 0px;" /></td>
		<td><img onclick="change(this.src, this.title);" src="5.gif" title="Bild 5" width="50" style="border: 0px;" /></td>
		<td><img onclick="change(this.src, this.title);" src="8.gif" title="Bild 8" width="50" style="border: 0px;" /></td>
	</tr>
	<tr>
		<td><img onclick="change(this.src, this.title);" src="3.gif" title="Bild 3" width="50" style="border: 0px;" /></td>
		<td><img onclick="change(this.src, this.title);" src="6.gif" title="Bild 6" width="50" style="border: 0px;" /></td>
		<td><img onclick="change(this.src, this.title);" src="9.gif" title="Bild 9" width="50" style="border: 0px;" /></td>
	</tr>
</table>

NEW_IN_JAVA · 14. September 2011

Hi,

danke mal für den Ansatz. Ich habe das auch sehr blöd erklärt, sorry mein Fehler.

Habe jetzt 2 Bilder hochgeladen, damit besser verstanden wird was ich meine.

Beschreibung1.png :

Wenn man auf Bild 1 klickt --> erscheinen die 3 Bilder / die kann man auch wieder anklicken --> je nach dem was man anklickt öffnet sich in einem neuen Tab die angegebene Seite

Beschreibung2.png :

Wenn man auf Bild 2 klickt --> erscheinen wieder an der selben Stelle die 3 Bilder (wo vorher die 3 Bilder von dem klick von Bild 1 waren) / die kann man auch wieder anklicken --> je nach dem was man anklickt öffnet sich in einem neuen Tab die angegebene Seite

tombe · 14. September 2011

Ich gehe jetzt mal davon aus das die Bilder 3 - 8 und auch die Link die damit verbunden werden fest vorgegeben sind.

Dann würde ich es so lösen:

HTML:

<script language="javascript" type="text/javascript">
function change(bild) {

if (bild == 1) {
	document.getElementById("bild1").style.display = "block";
	document.getElementById("bild2").style.display = "none"
} else if (bild == 2) {
	document.getElementById("bild1").style.display = "none";
	document.getElementById("bild2").style.display = "block";
}

}
</script>
<table border="1" cellpadding="5" cellspacing="0" summary="">
	<tr>
		<td>
			<img src="bild1.jpg" width="149" height="48" style="border: 0px;" onclick="change(1);"/>
			<br />
			<img src="bild2.jpg" width="149" height="48" style="border: 0px;" onclick="change(2);"/>
		</td>
		<td id="bild1" style="display: block;">
			<a href="www.google.de" target="_blank"><img src="bild3.jpg" width="73" height="58" style="border: 0px;" /></a>
			<br />
			<a href="www.yahoo.de" target="_blank"><img src="bild4.jpg" width="73" height="58" style="border: 0px;" /></a>
			<br />
			<a href="www.tutorials.de" target="_blank"><img src="bild5.jpg" width="73" height="58" style="border: 0px;" /></a>
		</td>
		<td id="bild2" style="display: none;">
			<a href="www.chip.de" target="_blank"><img src="bild6.jpg" width="73" height="58" style="border: 0px;" /></a>
			<br />
			<a href="www.facebook.de" target="_blank"><img src="bild7.jpg" width="73" height="58" style="border: 0px;" /></a>
			<br />
			<a href="www.twitter.de" target="_blank"><img src="bild8.jpg" width="73" height="58" style="border: 0px;" /></a>
		</td>
	</tr>
</table>

NEW_IN_JAVA · 20. September 2011

Ja genau das meinte ich. Klappt super

Danke @tombe

✔ javascript Bildvorschau als Link

NEW_IN_JAVA

Grünschnabel

tombe

Erfahrenes Mitglied

NEW_IN_JAVA

Grünschnabel

Anhänge

tombe

Erfahrenes Mitglied

NEW_IN_JAVA

Grünschnabel

Neue Beiträge