Bild mit Javascript auf Klick im Firefox ein/ausblenden?

Beitrag von **axelm** » 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?

von **Anzeige von ABAKUS** »

Beitrag von **Liesl_Weppen** » 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>

Beitrag von **joghurtKULTUR** » 26.10.2005, 18:21

display='none'

wäre meiner meinung nach besser

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **axelm** » 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.

Beitrag von **bsnoop** » 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.

Beitrag von **tobsn** » 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>

Beitrag von **derHund** » 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.

Beitrag von **jomd** » 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

Beitrag von **fornex** » 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>

Beitrag von **Fantomas** » 14.04.2006, 17:15

Beitrag von **jomd** » 14.04.2006, 17:29

danke - so einfach

Beitrag von **Southmedia** » 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.