ABAKUS

Verfasst: **26.10.2005, 13:24**

Hat Jemand ein Beispiel wie ich in Javascript/css auf Klick ein Bild ein und ausblende? Auch Firefox lauffähig? Selfhtml und einige Beispiele habe ich schon durch bekomme es aber nicht richtig CrossBrowser kompatible hin...

Hat jemand einen Tipp?

Verfasst: **26.10.2005, 15:33**

Hi,

probiers mal so:

Code: Alles auswählen

<html>
<head>
<script language="javascript">
function ausblenden&#40;&#41; &#123; 
document.getElementById&#40;'image'&#41;.style.visibility="hidden";
&#125;
function einblenden&#40;&#41; &#123; 
document.getElementById&#40;'image'&#41;.style.visibility="visible";
&#125;
</script>
</head>
<body>
<br><br>

<img id="image" src="images/image.gif" width="30" height="30" alt="">

<br><br>
<a href="#" onclick="ausblenden&#40;&#41;;">auf klick ausblenden</a><br>
<a href="#" onclick="einblenden&#40;&#41;;">auf klick einblenden</a><br>

</body>
</html>

Verfasst: **26.10.2005, 18:21**

display='none'

wäre meiner meinung nach besser

Verfasst: **27.10.2005, 09:17**

>display='none'
>wäre meiner meinung nach besser
wieso?

@Liesl_Weppen danke für den Code so weit war ich auch schon habe das ganz dann auf einen Link für an/aus gelegt und dann finden meine Browser probs. an. Im Firefox wurde statt dem Bild nur so ne Art Platzhalter wie ein Blindesgif angezeigt.

Verfasst: **27.10.2005, 10:23**

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" language="javascript">

function switcher&#40;&#41;
	&#123;
	status = document.getElementById&#40;"merker"&#41;.value;
	if&#40;status == "an"&#41;
		&#123;
		document.getElementById&#40;"merker"&#41;.value = "aus";
		Knoten = document.getElementById&#40;"bild"&#41;.firstChild;
		document.getElementById&#40;"bild"&#41;.removeChild&#40;Knoten&#41;;		
		&#125;
	else
		&#123;
		document.getElementById&#40;"merker"&#41;.value = "an";
		img = document.createElement&#40;"img"&#41;;
		img.width = "301";
		img.height = "110";		
		img.src = "http&#58;//www.google.de/intl/de_de/images/logo.gif";
		document.getElementById&#40;"bild"&#41;.appendChild&#40;img&#41;; 
		&#125;

	&#125;

</script>
</head>
<body onLoad="switcher&#40;&#41;">
<a href="#" onclick="switcher&#40;&#41;">An/Aus</a><br /><br />
<input type="hidden" id="merker" />
<span id="bild"></span>
</body>
</html>

Funktioniert bei mir im IE, FF, Moz und Opera. Wenn das Bild zuerst nicht sichtbar sein soll, dann einfach das onLoad="switcher()" aus dem Body Tag rausnehmen.

Verfasst: **27.10.2005, 11:29**

Code: Alles auswählen


<script type="text/javascript">

function click&#40; id &#41; &#123;
  var e = document.getElementById&#40; id &#41;;
  if&#40; e.style.display == 'none' &#41; &#123;
    e.style.display = '';
  &#125;
  else &#123;
    e.style.display = 'none';
  &#125;
&#125;

</script>

<div id="pic"><img src="/img/img.gif" alt="pic" /></div>
<a href="javascript&#58;click&#40;'pic'&#41;;">bla</a>

Verfasst: **27.10.2005, 13:06**

axelm hat geschrieben:>display='none'
>wäre meiner meinung nach besser
wieso?

weil bei setzen der visibility auf hidden lediglich die sichtbarkeit genommen wird, der platz, den das element benötigt, wird weiterhin reserviert.

per display wird kein element und kein platzhalter angezeigt.

Verfasst: **14.04.2006, 13:42**

tobsn hat geschrieben:

Code: Alles auswählen


<script type="text/javascript">

function click&#40; id &#41; &#123;
  var e = document.getElementById&#40; id &#41;;
  if&#40; e.style.display == 'none' &#41; &#123;
    e.style.display = '';
  &#125;
  else &#123;
    e.style.display = 'none';
  &#125;
&#125;

</script>

<div id="pic"><img src="/img/img.gif" alt="pic" /></div>
<a href="javascript&#58;click&#40;'pic'&#41;;">bla</a>

kann mir jemand dabei helfen, wie ich es schaffe, dass bei o.g. script das bild beim laden der seite erstmal "versteckt" ist und erst beim klick auf den link das bild erscheint?

danke!

grüße aus ingolstadt
pat

Verfasst: **14.04.2006, 17:09**

jomd hat geschrieben: kann mir jemand dabei helfen, wie ich es schaffe, dass bei o.g. script das bild beim laden der seite erstmal "versteckt" ist und erst beim klick auf den link das bild erscheint?

Code: Alles auswählen

function click&#40; id &#41; &#123; 
  var e = document.getElementById&#40; id &#41;; 
  if&#40; e.style.display == 'none' &#41; &#123; 
    e.style.display = ''; 
  &#125; 
  else &#123; 
    e.style.display = 'none'; 
  &#125; 
&#125; 

</script> 

<img id="pic" style="display&#58;none" src="/img/img.gif" alt="pic" />
<a href="javascript&#58;click&#40;'pic'&#41;;">bla</a>

Verfasst: **14.04.2006, 17:15**

Verfasst: **14.04.2006, 17:29**

danke - so einfach

Verfasst: **17.04.2006, 19:55**

Naja, so würde ich das definitiv nicht machen. Bei Browsern, bei denen Javascript deaktiviert ist, wird es damit unmöglich das Bild anzuzeigen.

Ich würde eher folgendes in den Head-Bereich einfügen:

Code: Alles auswählen

<script language="JavaScript" type="text/javascript">
<!--
if &#40;document.getElementById&#41; &#123;
	document.write&#40;'<style type="text/css">'&#41;;
	document.write&#40;'#pic &#123; display&#58;none; &#125;'&#41;;
	document.write&#40;'<\/style>'&#41;;
&#125;
//-->
</script>

Damit wird das Bild ausgeblendet wenn Javascript aktiviert ist. Ansonsten bleibt es sichtbar.

ABAKUS

Bild mit Javascript auf Klick im Firefox ein/ausblenden?

Bild mit Javascript auf Klick im Firefox ein/ausblenden?

Bild mit Javascript auf Klick im Firefox ein/ausblenden?

Bild mit Javascript auf Klick im Firefox ein/ausblenden?

Re: Bild mit Javascript auf Klick im Firefox ein/ausblenden?

Bild mit Javascript auf Klick im Firefox ein/ausblenden?

Bild mit Javascript auf Klick im Firefox ein/ausblenden?

Bild mit Javascript auf Klick im Firefox ein/ausblenden?