Archivlink: javarea.de Forum > JavaScript > Bild durch Anklicken vergrößern oder verkleinern
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Bild durch Anklicken vergrößern oder verkleinern

Pages: [1] 2 ... nächste » ... Letzte »
geschrieben von Nele am 31.12.2006 - 12:18
Hallo,

ich malwieder. Nach ewigem Suchen habe ich endlich ein einfaches Script zu vergrößer/verkleinern für Bilder gefunden. Soweit, sogut, nur funktioniert dieses Script mit nur einem Bild. Ich möchte aber gerne mehrere Bilder auf der gleichen Seite so anzeigen lassen.

Kann mir vielleicht jemand einen Tipp geben, wie ich das auf die Reihe bekomme ohne, dass mir schwindlig wird?


Hier mal eben das Script:

<html>
<head>
<script language="javascript">
<!--
var AngezeigteBreite = 300;
var GespeicherteBreite = 0;

function BildAnpassen(Bild)
{
Bild = document.getElementById(Bild);

if (Bild.width > AngezeigteBreite || GespeicherteBreite > AngezeigteBreite)
{
if (Bild.width == AngezeigteBreite)
{
Bild.width = GespeicherteBreite;
}
else
{
GespeicherteBreite = Bild.width;
Bild.style.cursor = "pointer";
Bild.width = AngezeigteBreite;
}
}
}
//-->
</script>
<title>Bild durch Anklicken vergrößern oder verkleinern</title>
</head>
<body>

<img id="Bild" onClick="BildAnpassen('Bild')" onLoad="BildAnpassen('Bild')" src="bild1" title="Zum Vergrößern/Verkleinern anklicken">

</body>
</html>

Für Eure Hilfe schon mal Danke.

Nele

geschrieben von Klaush am 02.01.2007 - 08:05
Du arbeitest doch mit getElementById(), dann kannst du die ID verwenden, wo liegt das Problem?

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 

<script language="javascript">
<!--
var AngezeigteBreite = 200;
var GespeicherteBreite = 0;

function BildAnpassen(Bild)
{

	Bild = document.getElementById(Bild);
	if (Bild.width > AngezeigteBreite || GespeicherteBreite > AngezeigteBreite)
	{
		if (Bild.width == AngezeigteBreite)
		{
			Bild.width = GespeicherteBreite;
		}
		else
		{
			GespeicherteBreite = Bild.width;
			Bild.style.cursor = "pointer";
			Bild.width = AngezeigteBreite;
		}
	}
}
//-->
</script>
<title>Bild durch Anklicken vergrößern oder verkleinern</title>
</head>
<body>

<img id="Bild1" onClick="BildAnpassen('Bild1')" onLoad="BildAnpassen('Bild1')" src="grafik1.gif" title="Zum Vergrößern/Verkleinern anklicken">
<img id="Bild2" onClick="BildAnpassen('Bild2')" onLoad="BildAnpassen('Bild2')" src="andere_grafik.gif" title="Zum Vergrößern/Verkleinern anklicken">



Was ich wichtiger finden würde wäre, wenn du das Bild nicht nur in der Breite, sondern auch in der Höhe proportional berechnen würdest, damit das Bild nicht verzerrt.

geschrieben von Nele am 03.01.2007 - 14:37
Hi Klaus,

>>Du arbeitest doch mit getElementById(), dann kannst du die ID verwenden, wo liegt das Problem?<<

tja, wo das Problem lag, was ich nu auch nicht mehr, hatte wohl Stau am Alzheimer Dreieck, gg. ich hätte wohl erst mal meine gehirnwindungen aktivieren sollen, bevor ich frage, aber trotzdem viiiiiiiiiiiiiielen Dank, du hast mir immerhin auf die sprünge geholfen.

Nele

geschrieben von AnjaJS am 12.04.2010 - 07:47
Hallo. Habe auch diesem Script Im Internet / hier gefunden. Und es aus probiert.

Leider funktioniert er nicht, weil er onLoad nicht anerkennt. Warum nicht??? Arbeite mit Notepad ++, Firefox 3.5 und Explorer 7. Es geht einfach nix.

Alle Bilder stehen sichtbar nebeneinander.

Ist doch richtig, dass die Seite als HTML gespeichert wird?

Bitte um Schnelle Antwort.

Mein Code lautet:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<head>
<script type="text/javascript">
<!--
var AngezeigteBreite = 300;
var GespeicherteBreite = 0;
function BildAnpassen(Bild)
{
    if (Bild.width > AngezeigteBreite || GespeicherteBreite > AngezeigteBreite)
    {
       if (Bild.width == AngezeigteBreite)
       {
           Bild.width = GespeicherteBreite;
        }
        else
        {
            GespeicherteBreite = Bild.width;
           Bild.style.cursor = "pointer";
            Bild.width = AngezeigteBreite;
        }
    }
}
//-->
</script>
<title>Bild durch Anklicken vergrößern oder verkleinern</title>
</head>
<body>

<img id="Bild1" onclick="BildAnpassen('Bild1')" onLoad="BildAnpassen('Bild1')" src="bilder/a.jpg" title="Zum Vergrößern/Verkleinern anklicken"/>
<img id="Bild2" onclick="BildAnpassen('Bild2')" onLoad="BildAnpassen('Bild2')" src="bilder/schule.jpg" title="Zum Vergrößern/Verkleinern anklicken"/>

</body>
</html>

geschrieben von Danny am 12.04.2010 - 14:34
Hallo Anja,

der entscheidende Fehler ist die fehlende erste Zeile in der BildAnpassen() Funktion

HTML-Quelltext
1: 

Bild = document.getElementById(Bild);


Bild ist bei Funktionsaufruf ja nur der String der Id. In der Funktion möchtest du aber Breite von dem Element "Bild" ändern.

Also hier noch einmal die Funtkion im Ganzen:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 

function BildAnpassen(Bild)
{
	Bild = document.getElementById(Bild);
    if (Bild.width > AngezeigteBreite || GespeicherteBreite > AngezeigteBreite)
    {
       if (Bild.width == AngezeigteBreite)
       {
           Bild.width = GespeicherteBreite;
        }
        else
        {
            GespeicherteBreite = Bild.width;
           Bild.style.cursor = "pointer";
            Bild.width = AngezeigteBreite;
        }
    }
}



Gruß Danny

geschrieben von AnjaJS am 13.04.2010 - 07:35
So weit ist ja alles ok. Bis auf onLoad! Das mag er nicht. Und es klappt nix. Nun stehen die Bilder unter einander: mein Ausführliches Hatml-Seite!

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 
77: 
78: 
79: 
80: 
81: 
82: 
83: 
84: 
85: 
86: 
87: 
88: 
89: 
90: 
91: 
92: 
93: 
94: 
95: 
96: 
97: 
98: 
99: 
100: 
101: 
102: 
103: 
104: 
105: 
106: 
107: 
108: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">

<head>
		<title>Tauchen</title>


<script type="text/javascript">
<!--
var AngezeigteBreite = 300;
var GespeicherteBreite = 0;


function BildAnpassen(Bild)
{
	Bild = document.getElementById(Bild);
    if (Bild.width > AngezeigteBreite || GespeicherteBreite > AngezeigteBreite)
    {
       if (Bild.width == AngezeigteBreite)
       {
           Bild.width = GespeicherteBreite;
        }
        else
        {
            GespeicherteBreite = Bild.width;
            Bild.style.cursor = "pointer";
            Bild.width = AngezeigteBreite;
        }
    }
}
//-->
</script>
	
		<link rel="stylesheet" type="text/css" 	  href="typo/layout.css" />
		<link rel="stylesheet" type="text/css"	  href="typo/textformatierungTAUCHEN.css" />		
</head>


<body >
<div id="webseite"> 
				<img src="bilder/logostreifen.png" alt="logo"  class="logo"/>
			<div id="navileiste">			
		
			<div id="nav">
				<ul class="level1">
					 <li><a href="home.html">						Home				</a></li>
					 <li class="submenu"><a href="tauchen.html">	Tauchen				</a>
						   <ul class="level2">
								<li><a href="aussrustung.html">		Ausr&uuml;stung	</a></li>
								<li><a href="technick.html">		Technik			</a></li>	
								<li><a href="tauchetplaetze.php">	Taucherpl&auml;tze	</a></li>
								<li><a href="taucherreisen.html">	Taucherreisen		</a></li>
							</ul>
					 </li >
					  <li class="submenu"><a href="kurs.html">		Tauchkurse		</a>
							 <ul class="level2">
								<li><a href="kinderkurs.html">		Kinderkurse		</a></li>
								<li><a href="Kkurse.html"><img src="bilder/pfeil_re.gif" alt="pfeil_re" class="pfeil_re"  style="border:0px"></img>Robbe	</a></li>
								<li><a href="Kkurse.html"><img src="bilder/pfeil_re.gif" alt="pfeil_re" class="pfeil_re"  style="border:0px "></img>Otter</a></li>
							   <li><a href="schnupperkurs.html">	Schnupperkurs	</a></li>
							   <li><a href="wiedereinsteiger.html"> Wiedereinsteiger</a></li>
							   <li><a href="Kursangebot.php">		Kursangebot</a></li>
							   
							</ul > 
					</li>   
					<li><a href="bieldergalerie.php">				Bildergalerie	</a></li>
					<li><a href="kontakt.php">						Kontakt			</a></li>
					<li><a href="impressum.html">					Impressum		</a></li>
				</ul>
			</div>	
		</div>

		<div id="mitte">
			<h1>Vorgeschmack zum Tauchen</h1>
			<h2>Gute Gründe zum tauchen</h2>
			<p class="vorFilm">
			
			Ich bewege mich langsam &uuml;ber die wilde und wundersch&ouml;ne unerforschte Welt unter mir hinweg.
			Ich schwebe durch die Stille, die nur vom Klang meines Atems unterbrochen wird.
			&Uuml;ber mir nur dieses schimmernde Licht, von wo ich kam und wohin ich zur&uuml;ckkehren werde, wenn ich soweit bin.
			Ich bin Taucher. Ich bin ein Tiefseetaucher. Ich tauche vorbei an zerfurchten Felsen und dunklem Seegras.
			Einem tiefen Blau entgegen, wo ein Schwarm silberner Fische mich erwartet. Ich gleite weiter und merke, 
			wie aus meinem Mund Blasen emporsteigen wie zitternde kleine Quallen und &uuml;berpr&uuml;fe meinen S**erstoff. 
			Mir bleibt nicht genug Zeit, um alles zu sehen. Aber genau das ist das besondere.<br/>	
			</p>
			<div id="film">
				<h3>Die Br&uuml;cke nach Terabithia</h3>
				
				<img id="Bild1" onclick="BildAnpassen('Bild1')" onLoad="BildAnpassen('Bild1')" src="bilder/a.jpg" title="Zum Vergrößern/Verkleinern anklicken" alt="filmklein"/>
				<img id="Bild2" onclick="BildAnpassen('Bild2')" onLoad="BildAnpassen('Bild2')" src="bilder/a.jpg" title="Zum Vergrößern/Verkleinern anklicken"alt="filmkgross"/>

			</div>
		
		<div class="cl"></div>
								
	</div>

		<div id="fuss">
		 
		<img src="bilder/aninimation_welle.gif" alt="welle2"  class="w2"/>
			
		</div>
	

</div>
</body>
</html>

geschrieben von AnjaJS am 14.04.2010 - 10:36
Zitat von: AnjaJS am 13.04.2010 - 07:35
 
So weit ist ja alles ok. Bis auf onLoad! Das mag er nicht. Und es klappt nix. Nun stehen die Bilder unter einander: mein Ausführliches Hatml-Seite!

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 
77: 
78: 
79: 
80: 
81: 
82: 
83: 
84: 
85: 
86: 
87: 
88: 
89: 
90: 
91: 
92: 
93: 
94: 
95: 
96: 
97: 
98: 
99: 
100: 
101: 
102: 
103: 
104: 
105: 
106: 
107: 
108: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">

<head>
		<title>Tauchen</title>


<script type="text/javascript">
<!--
var AngezeigteBreite = 300;
var GespeicherteBreite = 0;


function BildAnpassen(Bild)
{
	Bild = document.getElementById(Bild);
    if (Bild.width > AngezeigteBreite || GespeicherteBreite > AngezeigteBreite)
    {
       if (Bild.width == AngezeigteBreite)
       {
           Bild.width = GespeicherteBreite;
        }
        else
        {
            GespeicherteBreite = Bild.width;
            Bild.style.cursor = "pointer";
            Bild.width = AngezeigteBreite;
        }
    }
}
//-->
</script>
	
		<link rel="stylesheet" type="text/css" 	  href="typo/layout.css" />
		<link rel="stylesheet" type="text/css"	  href="typo/textformatierungTAUCHEN.css" />		
</head>


<body >
<div id="webseite"> 
				<img src="bilder/logostreifen.png" alt="logo"  class="logo"/>
			<div id="navileiste">			
		
			<div id="nav">
				<ul class="level1">
					 <li><a href="home.html">						Home				</a></li>
					 <li class="submenu"><a href="tauchen.html">	Tauchen				</a>
						   <ul class="level2">
								<li><a href="aussrustung.html">		Ausr&uuml;stung	</a></li>
								<li><a href="technick.html">		Technik			</a></li>	
								<li><a href="tauchetplaetze.php">	Taucherpl&auml;tze	</a></li>
								<li><a href="taucherreisen.html">	Taucherreisen		</a></li>
							</ul>
					 </li >
					  <li class="submenu"><a href="kurs.html">		Tauchkurse		</a>
							 <ul class="level2">
								<li><a href="kinderkurs.html">		Kinderkurse		</a></li>
								<li><a href="Kkurse.html"><img src="bilder/pfeil_re.gif" alt="pfeil_re" class="pfeil_re"  style="border:0px"></img>Robbe	</a></li>
								<li><a href="Kkurse.html"><img src="bilder/pfeil_re.gif" alt="pfeil_re" class="pfeil_re"  style="border:0px "></img>Otter</a></li>
							   <li><a href="schnupperkurs.html">	Schnupperkurs	</a></li>
							   <li><a href="wiedereinsteiger.html"> Wiedereinsteiger</a></li>
							   <li><a href="Kursangebot.php">		Kursangebot</a></li>
							   
							</ul > 
					</li>   
					<li><a href="bieldergalerie.php">				Bildergalerie	</a></li>
					<li><a href="kontakt.php">						Kontakt			</a></li>
					<li><a href="impressum.html">					Impressum		</a></li>
				</ul>
			</div>	
		</div>

		<div id="mitte">
			<h1>Vorgeschmack zum Tauchen</h1>
			<h2>Gute Gründe zum tauchen</h2>
			<p class="vorFilm">
			
			Ich bewege mich langsam &uuml;ber die wilde und wundersch&ouml;ne unerforschte Welt unter mir hinweg.
			Ich schwebe durch die Stille, die nur vom Klang meines Atems unterbrochen wird.
			&Uuml;ber mir nur dieses schimmernde Licht, von wo ich kam und wohin ich zur&uuml;ckkehren werde, wenn ich soweit bin.
			Ich bin Taucher. Ich bin ein Tiefseetaucher. Ich tauche vorbei an zerfurchten Felsen und dunklem Seegras.
			Einem tiefen Blau entgegen, wo ein Schwarm silberner Fische mich erwartet. Ich gleite weiter und merke, 
			wie aus meinem Mund Blasen emporsteigen wie zitternde kleine Quallen und &uuml;berpr&uuml;fe meinen S**erstoff. 
			Mir bleibt nicht genug Zeit, um alles zu sehen. Aber genau das ist das besondere.<br/>	
			</p>
			<div id="film">
				<h3>Die Br&uuml;cke nach Terabithia</h3>
				
				<img id="Bild1" onclick="BildAnpassen('Bild1')" onLoad="BildAnpassen('Bild1')" src="bilder/a.jpg" title="Zum Vergrößern/Verkleinern anklicken" alt="filmklein"/>
				<img id="Bild2" onclick="BildAnpassen('Bild2')" onLoad="BildAnpassen('Bild2')" src="bilder/a.jpg" title="Zum Vergrößern/Verkleinern anklicken"alt="filmkgross"/>

			</div>
		
		<div class="cl"></div>
								
	</div>

		<div id="fuss">
		 
		<img src="bilder/aninimation_welle.gif" alt="welle2"  class="w2"/>
			
		</div>
	

</div>
</body>
</html>

geschrieben von Danny am 14.04.2010 - 10:47
Hallo Anja,

der Code den du gepostet hast 1zu1 kopiert funktioniert bei mir im Firefox und Opera wunderbar. Ist es der IE der hier Probleme hat ?
Soweit ich weiß ist das onload Attribut in <img> Tags auch nicht undbedingt erlaubt, wird aber in den meisten Browsern unterstützt dachte ich.

Du kannst das ja mal so versuchen:

die onload's in den <img> rausnehmen und dfür im <body> Tag die Anweisungen reinpacken.

HTML-Quelltext
1: 

<body onload="BildAnpassen('Bild1'); BildAnpassen('Bild2')">



Gruß Danny

geschrieben von AnjaJS am 14.04.2010 - 11:22
Danke für deine Antwoeten.

Ich habe nun dein Hinweis in meine Seite eingearbeitet. Es geht immer noch nicht! Er sagt mir immer noch OnLoad fehler! Warum bloss? Gibts da noch etwas anderes als on Load??????

Gruß Anja

geschrieben von Danny am 14.04.2010 - 13:42
Hast du die Seite online ? Dann guck ich sie mir mal direkt an.

geschrieben von AnjaJS am 14.04.2010 - 13:54
Danke DANY für deine speed Antwort.

Meine Seite ist endlich valide.

Das Problem bleibt weiterhin bestehn: keine Funktion!
Das verstehe ich nicht, an was es liegen kann! Die Beiden bilder stehen unterinander, steif ohne Effekt da!

Bitte nochmals mir Antworten. Danke sehr


meine Funktion:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 

<script type="text/javascript">
<!--
var AngezeigteBreite = 300;
var GespeicherteBreite = 0;


function BildAnpassen(Bild)
{
	Bild = document.getElementById(Bild);
		if (Bild.width > AngezeigteBreite || GespeicherteBreite > AngezeigteBreite)
		{
		   if (Bild.width == AngezeigteBreite)
		   {
			   Bild.width = GespeicherteBreite;
			}
			else
			{
				GespeicherteBreite = Bild.width;
				Bild.style.cursor = "pointer";
				Bild.width = AngezeigteBreite;
			}
		}
}
//-->


mein Body:

HTML-Quelltext
1: 

<body onload="BildAnpassen('Bild1'); BildAnpassen('Bild2')"></body>


meine Bilder

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 

<div id="film">
<h3>Die Br&uuml;cke nach Terabithia</h3>
						
<img id="Bild1" onclick="BildAnpassen('Bild1')"  src="bilder/a.jpg"  alt="filmklein"/>
<img id="Bild2" onclick="BildAnpassen('Bild2')"  src="bilder/b.jpg" alt="filmkgross"/>
</div>

geschrieben von AnjaJS am 14.04.2010 - 13:58
Seite Funktioniert mit Script

geschrieben von Danny am 14.04.2010 - 14:03
Hallo Anja,
jetzt mal eine blöde Frage: Kann es sein, dass die Bilder einfach zu klein sind ? Das eine Bild hat eine Breite von 278px, das andere von 200px. Als maximal Breite sind 300px eingestellt. Da gibt es doch auch ncihts weiter zu verkleinern/größern ?

geschrieben von AnjaJS am 14.04.2010 - 14:25
Ich möchte das bild rechts klein neben dem text sitzt.

So nun habe ich Feierabend. Einenschönen Tag wünsche ich dir. Bis morgen!

DANKE SCHÖÖÖÖÖÖÖÖÖÖÖÖÖÖÖÖÖÖÖÖÖN

geschrieben von AnjaJS am 15.04.2010 - 07:29
Danke für deine super Hilfe-Antworten.

Dein Gedanke wahr richtig. die Bildergröße stimmte nicht! ich habe die 300 auf 100 runter grestzt. Dann klappt es prima!



Hochachtungsvoll Anja

:bounce::bounce::bounce: JIPPPYYYYYYYYY es funktioniert!!!!!


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.