Viele Bilder mit onMouseover sichtbar machen

M

Moonwolf

Grünschnabel
Hallo, brauche eine Schleifen-Abfrage.

Kurz gesagt, es geht um einen Teil einer Page, wenn man dort über bestimmte worte klickt soll dazu ein Bild sichtbar werden. Hab es Momentan mit CSS gelöst, hab aber Problem mit der Abfrage.

So siehts im Moment aus:

function show() {
if(document.getElementById("demo1"))
document.getElementById("demo1").style.visibility = "visible";
else(document.getElementById("demo2"))
document.getElementById("demo2").style.visibility = "visible";
}
switch(document.getElementById) {
case "demo1":
document.getElementById("demo1").style.visibility = "visible";
break;
case "demo2":
document.getElementById("demo2").style.visibility = "visible";
break;
}
function hide() {
if(document.getElementById)
document.getElementById("demo1").style.visibility = "hidden";
document.getElementById("demo2").style.visibility = "hidden";
}
//-->
</script>

<style TYPE="text/css">
#Steuerung {position: absolute; z-index: 100; visibility: visible;}
#demo1 { position: fixed; top: 5px; left: 0px; width: 65px; height: 65px; visibility: hidden; }
#demo2 { position: fixed; top: 5px; left: 0px; width: 65px; height: 65px; visibility: hidden; }
</style>

Ich hab leider keine Ahnung wie ich der Funktion sagen kann, das sie entweder das eine oder das andere Zeigen soll, aber niemlas beide gleichzeitig, so ist momentan leider der stand.

Wenn jemand einen anderen Vorschlag hat, ich bin für jede Hilfe dankbar.

Moonwolf
 
Die Fallunterscheidung zwischen demo1 und demo2 dürfte so nicht funktionieren, und macht auch keinen Sinn, weil beide Objekte immer vorhanden sind.
Du musst die "visibility" erfragen, jene ist es, auf die du reagieren willst:
Code: 
<script type="text/javascript">
<!--
function show()
{
  if(document.getElementById)
  {
  if(document.getElementById('demo1').style.visibility=='visible')
  	{
  	document.getElementById('demo1').style.visibility='hidden';
  	document.getElementById('demo2').style.visibility='visible';return;
  	}
  document.getElementById('demo1').style.visibility='visible';
  document.getElementById('demo2').style.visibility='hidden';
  }
}
//-->
</script>
Das wird dir momentan wahrscheinlich nicht viel weiterhelfen, da du ja von "vielen Bildern" geschrieben hast, und nicht nur von zweien, ...da müsst man allerdings wissen, inwiefern du bei den vielen Bildern etwas tun willst.
Da die visibility hier 2 Zustände annimmt, wäre auch bei dem 2. Bild Schluss, da spätestens dort der Ernstfall eintritt.... an weiteren Bildern würde sich nie etwas ändern.
 
Andere Lösung neues Problem

Mein oben genanntes Problem hab ich erstmal anders gelöst. Und zwar mit diesem Code:

<SCRIPT LANGUAGE="JavaScript">
<!--
description = new Image;
window.onerror = null;
function setDescription(imgName)
{
document.description.src=imgName;
}
// -->
</SCRIPT>

Jetzt erledigt die Hauptarbeit eigentlich nur noch der Link:

<a href="setDescription('qual/garage.jpg');" onmouseover="setDescription('qual/garage.jpg');" onmouseout="setDescription('qual/blank.gif');">

Das definierte CSS sieht so aus:

#bild { position: fixed; z-index: 1; top: 5px; left: 0px; width: 65px; height: 65px; }

Problem ist jetzt nur, der Text ist so ellenlang, jedoch scrolled das Bild nicht mit.

Hat jemand ne Lösung, wie ich einfach den Bild-Kasten mit-scrollen lassen kann

Danke schonmal!
 
Problem ist der IE

Eigentlich hast du recht, Problem ist nur der Internet Explorer interpretiert es nicht richtig, sprich nach dem scrollen ist es einfach weg.

Aber trotzdem Danke.
 
Versteh ich nicht..logisch, wenn du scrollst , ist das Bild irgendwann weg,---natürlich, weil es mitscrollt(was du doch willst)... und das tut es in jedem Browser?:-( oder hab ich etwas falsch verstanden?
 
Eben diesen Effekt kann ich nicht gebrauchen, da ich die Selbe Position für alle Bilder behalten möchte. Sprich die Position soll fixiert sein. Problem ist aber der IE da er das nicht gescheit interpretieren kann.

Hast du ne Lösung
 
Achso..., ja mit "fixed" kann er nichts Gescheites anfangen, vielleicht machts ja IE7 :-) da muss auch Javascript herhalten :(
Code: 
<script type="text/javascript">
<!--
iX=-1;iY=-1;
function fixieren()
{
obj=document.all.bild;
if(obj)
	{
	if(iX<0){obj.style.position='absolute';iX=parseInt(obj.offsetLeft);iY=parseInt(obj.offsetTop);}
	obj.style.left=iX+document.body.scrollLeft;
	obj.style.top=iY+document.body.scrollTop;
	}
}
if(document.all&&!window.opera)
{
window.onscroll=fixieren;
window.onload=fixieren;
}
//-->
</script>
....Beim Laden der Seite wird im IE die position des Bildes von "fixed" auf "absolute" umgestellt.
Beim Scrollen wird dann für dieses Bild die Position entsprechend der gescrollten Strecke geändert.

Ich hoff, es hilft weiter :)
 
Danke, danke

Danke nochmal, hab allerdings schon eine andere Lösung gefunden, und zwar:

Im Head steht:
<!--
html {overflow: auto;}
-->
<!--[if gte IE 5]>
<link href="qual/ie5.css" rel="stylesheet" type="text/css">
<![endif]-->

und in der ie5.css:

html, body {
color: white; font: 12px/20px Arial, Helvetica; bgcolor: #FCD978; scrollbar-3dlight-color:#9ea1af; scrollbar-arrow-color:#65697f; scrollbar-base-color:#65697f; scrollbar-darkshadow-color:#65697f; scrollbar-face-color:#9ea1af; scrollbar-hightlight-color:#ffffff; scrollbar-shadow-color:#65697f
height: 100%;
overflow-y: hidden;
}
.container { width: 100%; height: 100%; overflow: auto }
.inhalt { position: static; left: 67px; width: 233px }
.menu { z-index: 1;
background-color: #FCD978;
color: white;
position: absolute; /*absolute Positionierung */
top: 5px; /* vom oberen Rand 0px entfernt */
left: 0px; /* und vom linken rand ebenfalls 0px entfernt */
width: 65px; /* Gleiche Breite und */
height: 65px; /* Höhe, wie auch bei den anderen Browsern. */
}

wichtig dabei ist nur, dass die div von container und inhalt ineinader verschachtelt sind.

Für alle andere Browser, bzw. die normal verlinkung zur CSS:
.menu { position: fixed;}!

Werd dein Script aber auch noch ausprobieren.

Moonwolf
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück