Bild Sichtbar machen bei mouseover

T

-Tux-

0
Hi,
hat jemand ne idee wie ich ein bild via mouseover sichtbar machen kann?
Zur zeit siehts so aus:
PHP: 
echo '<li class="icon holzi" onMouseOver="void(document.test.display=\'inline\')"><img src="grafik/patches/1.png" id="test" style="display:none;">  </li>';
Das li hat selbst auch noch eine hintergrund grafik und das Bild soll darüber erscheinen. Nur irgenwie will es nicht so ganz.
Hat jemand ne idee?
Gruß
 
Wenn du CSS-Eigenschaften per JavaScript ändern willst musst du dies auch dazuschreiben (style). Außerdem musst du wenn du eine Id verwenden willst diese auch ansprechen (getElementById()):

Code: 
document.getElementById('test').style.display="block"
 
Also man kann (falls es mehrere Bilder sein sollen, die auch angeklickt werden sollen) auch folgendes machen.

Mit

Code: 
document.MyImages[0] = new MultiImage("juuuhuuu", "img/wasauchimmer.png","img/hierdashoverbildrein.png","");
document.MyImages[1] = new MultiImage("mein", "img/undsoweiter.png","img/undsoweiter.png","");
document.MyImages[2] = new MultiImage("Hoverpic", "img/undsofort.png","img/undsofort.png","");
den Bildern IDs zuordnen und das ganze mit

Code: 
function MultiImage(key, normalPic, hoverPic, selectedPic) 
{
			       
	this.normalPic = new Image();
	this.normalPic.src = normalPic;
				
	this.hoverPic = new Image();
	this.hoverPic.src = hoverPic;
				
	this.selectedPic = new Image();
	this.selectedPic.src = selectedPic;
}
			
function FindMultiImage(filename) 
{
				
	if (!document.MyImages) return;
							    
	for(i=0; i<document.MyImages.length; i++) {
	if (document.MyImages[i].normalPic.src == filename) 	
       return document.MyImages[i];
	if (document.MyImages[i].hoverPic.src == filename) 		
       return document.MyImages[i];
	if (document.MyImages[i].selectedPic.src == filename) 	
       return document.MyImages[i];				
}
return null;
}
			
function hoverIt(object) 
{
	foundMultiImage = FindMultiImage(object.src);
	if (!foundMultiImage) return "about:blank";
	object.src = foundMultiImage.hoverPic.src;
}
			
	function normalIt(object) {
	foundMultiImage = FindMultiImage(object.src);
	if (!foundMultiImage) return "about:blank";
	object.src = foundMultiImage.normalPic.src;
}

function selectIt(object)
 {
	foundMultiImage = FindMultiImage(object.src);
	if (!foundMultiImage) return "about:blank";
	object.src = foundMultiImage.selectedPic.src;
}
hovern lassen.

Vielleicht klappts bei dir ja auf diese Weise. Du musst eben als Startpic ein Bild nehme dass exakt in den Hintergrund reinpasst und wenn man dann mit der Maus drüberfährt, erscheint das gewollte Hoverpic. Und du musst nichtmal was an deinen CSS Eigenschaften ändern.

Mfg

aYone
 
Wieso so kompliziert und vor allem: wieso mit Javascript?

Seiten, die Javascript zum Herstellen ihres Aussehens voraussetzen, sehen bei mir (und allen Leuten, denne ich beim Einstellen ihres Systems helfen darf) regelmäßig erstmal mindestens häßlich, wenn nicht gar ganz und gar leer aus.

In der regel mache ich für sowas keinen weiteren Finger krumm, es sei denn, ich wüßte VORHER, daß dahinter etwas wichtiges auf mich wartet.

Das ganze (was Ihr alle mit Euren Vorschlägen hier wollt) ist aber in purem CSS notierbar und dann in keinster Weise von irgendwelchen "aktiven Komponenten" abhängig (ich gehe mal gleich auf das erwähnte, aber nicht dargestellte background image ein...):

(Nur ein Experimentierbeispiel. Das meiste davon wird nicht benötigt.)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
	<style>
	ul
	{
		border: 1px solid black;
	}
	li
	{
		border: 1px solid blue;
	}
	#test
	{
		padding: 0 200px 0 0;
		background: url("img/papier.png");
		border: 1px solid red;
	}
	.holzi:hover #test
	{
		background: url("img/background-stein.jpg");
	}
	</style>
</head>
<body>
<ul>
	<li class="icon holzi"><span id="test"></span></li>
	<li class="icon holzi"><span id="test"></span></li>
	<li class="icon holzi"><span id="test"></span></li>
</ul>
</body>
</html>

Es ist wichtig, das padding zum Aufziehen des an sich leeren Elements zu verwenden.
 
@Harry Boeck: deine Lösung wird aber kein IE anzeigen. Der IE versteht :hover nur bei <a>-Tags. Folglich müsste man für deinen Lösungsweg um das Bild einen Link legen bzw. das Bild selbst als Hintergrund dem Link zuordnen.
 
Für den IE probiere ich's gleich mal aus...

Also: Daß der IE ":hover" nur bei Anchors kennt, kann ich erstmal nicht nachvollziehen (möglicherweise mangels Experimentierbasis: Microsoft hatte mit dem Ding ja dermaßen viel Scheiße gebaut - unter anderem, daß man immer nur eine Version auf einem System haben kann -).

Allerdings benötigt der IE (in der aktuellen Fassung) noch IRGENDEINE Füllung des spans - z.B. " ":

...Ach ja: Und ich hatte es beim Experimentieren selbst schon wieder verkompliziert...
...Und noch einer: Natürlich werden für verschiedene ListItems verschiedene IDs vergeben. Das hier war nur ein Demo-Beispiel, daß es so geht.
Das Padding dagegen definiert man einmalig für den Elementetyp.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
	<style>
	ul
	{
		border: 1px solid black;
	}
	li
	{
		border: 1px solid blue;
	}
	.icon.holzi
	{
		padding: 0 200px 0 0;
		border: 1px solid red;
	}
	#test		{background: url("img/papier.png");}
	#test:hover	{background: url("img/background-stein.jpg");}
	</style>
</head>
<body>
<ul>
	<li class="icon holzi"><span id="test"> </span></li>
	<li class="icon holzi"><span id="test"> </span></li>
	<li class="icon holzi"><span id="test"> </span></li>
</ul>
</body>
</html>

Ach ja... Nochwas: Ich habe jetzt doch noch einen IE6 ausprobiert, dort passiert ja ÜBERHAUPT nichts bei ":hover"! Also. Auch nicht, wenn ich den span gegen einen Anchor tausche! Kann mir jemand einen Tip geben, was für den falsch daran ist?

So, für den alten IE6 kann ich bestätigen, daß ":hover" nur mit Anchor funktioniert.
Allerdings nehme ich mal an, daß es in der Anwendung hier letztlich doch sicherlich um genau ein paar Anchors gehen wird, oder? Sowas ähnliches - nehme ich mal an - hatten sich die Leute bei Microsoft wohl zunächst auch gedacht...
Außerdem verarbeitet der IE6 das Padding falsch. Es funktioniert allerdings, wenn man ihm folgendes vorsetzt:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
	<style>
	ul			{border: 1px solid black;}
	li			{border: 1px solid blue; }
	a			{border: 1px solid red; }
	#test		{background: url("img/papier.png");}
	#test:hover	{background: url("img/background-stein.jpg");}
	img			{width: 200px; height: 20px; border: none; vertical-align: top;}
	</style>
</head>
<body>
<ul>
	<li class="icon holzi"><a href="" id="test"><img src="img/space.gif"/></a></li>
	<li class="icon holzi"><a href="" id="test"><img src="img/space.gif"/></a></li>
	<li class="icon holzi"><a href="" id="test"><img src="img/space.gif"/></a></li>
</ul>
</body>
</html>

DAS allerdings wird erstmal wieder vom Firefox falsch dargestellt (der Anchor ist zu wenig "hoch"). Es bleibt aber wohl die Möglichkeit einer Browserweiche.
Und irgendwie erinnere ich mich, gerade erst ein Menü in meiner Firma korrigiert zu haben, das zuerst extrem dreckig (redundant, verkompliziert) ausgeführt war, aber dann doch auf ALLEN üblichen Browsern (Opera, Firefox, IE6 und IE7) lief.

Das wächst sich allerdings schon wieder aus. Ich denke, als Anregung reicht das erstmal.
 
Gute Idee. Mein Vorschlag ist um einiges komplizierter, aber er verrichtet sein Werk auch. Es bleibt -Tux- überlassen wie er weiter vorgehen will.

Ich würde entweder Harry's Vorschlag nehmen (der zugegebenermaßen besser als meiner ist) oder meinen in einer spereraten .js Datei einbinden.
"<script language="javascript" src="javairgendwas.js" type="text/javascript">"dürfte ja bekannt sein.

Zeigst du uns die Seite mal Tux? - rein aus Interesse -
 
RE: Für den IE probiere ich's gleich mal aus...

Original von Harry Boeck
Microsoft hatte mit dem Ding ja dermaßen viel Scheiße gebaut - unter anderem, daß man immer nur eine Version auf einem System haben kann -).
Zum Vergrößern anklicken....

Schau dich mal nach MultipleIE um. Ich hab immer mindestens 2 IE-Versionen unter Windows ;)

Allerdings benötigt der IE (in der aktuellen Fassung) noch IRGENDEINE Füllung des spans - z.B. " ":
Zum Vergrößern anklicken....

Was aus xhtml entspricht und somit richtig ist ..
 
XHTML erlaubt keine ungeschlossenen Tags, das heißt aber nicht, dass sie nicht leer sein dürfen.

Code: 
<span></span>

wäre damit ebenso korrekt wie

Code: 
<span/>

Das hat aber nichts mit IE-Eigenheiten zu tun, der da offenbar Text innerhalb bestimmter Elemente erfordert (oder sich bei anderen Elementen Inhalt ausdenkt, der gar nicht da ist... was der häufigere Fall bei mir bisher war *g).
 
benutze zur Zeit ein JS, funktioniert aber tragischer Weise nur in Opera...

bei Interesse kram ichs dir ma raus

MfG
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben