[HaBo]

-Tux- · 23.10.07, 17:10

Hi,
hat jemand ne idee wie ich ein bild via mouseover sichtbar machen kann?
Zur zeit siehts so aus:

PHP-Code:

  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ß

Zwirni · 23.10.07, 19:31

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"

Anzeige

- Anzeige -

aYone · 17.11.07, 19:15

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

Harry Boeck · 18.11.07, 01:35

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.

Zwirni · 18.11.07, 01:38

@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.

Harry Boeck · 18.11.07, 01:40

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">&nbsp;</span></li>
	<li class="icon holzi"><span id="test">&nbsp;</span></li>
	<li class="icon holzi"><span id="test">&nbsp;</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.

aYone · 19.11.07, 09:10

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 -

Zwirni · 19.11.07, 22:28

Zitat:

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 -).

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

Zitat:

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

Was aus xhtml entspricht und somit richtig ist ..

LX · 20.11.07, 01:03

Zitat:

Original von Zwirni

Zitat:

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

Was aus xhtml entspricht und somit richtig ist ..

Aus welcher Angabe der Doctype-Definition schließt du denn sowas?

Zwirni · 20.11.07, 01:12

Diese da in dem Beispiel auf die sich der erste Satz bezieht ... ?!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Wobei man auch <span /> schreiben könnte, was aber mE ältere Browser missverstehen könnten.

Siehe auch:
http://www.edition-w3c.de/TR/2002/RE...heading-4.6%A0
http://de.selfhtml.org/html/xhtml/un...leere_elemente
http://meiert.com/de/publications/tr...html-vs-xhtml/

LX · 20.11.07, 01:14

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).

.:L · 20.11.07, 06:47

benutze zur Zeit ein JS, funktioniert aber tragischer Weise nur in Opera...

bei Interesse kram ichs dir ma raus

MfG

Anzeige

- Anzeige -

23.10.07, 17:10	#1 (permalink)
-Tux- Registriert seit: 03.01.05 Likes: 0	Bild Sichtbar machen bei mouseover Anzeige Hi, hat jemand ne idee wie ich ein bild via mouseover sichtbar machen kann? Zur zeit siehts so aus: PHP-Code: `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ß

23.10.07, 19:31	#2 (permalink)
Zwirni Registriert seit: 20.01.03 Likes: 0	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"

18.11.07, 01:35	#4 (permalink)
Harry Boeck Registriert seit: 17.02.06 Likes: 0	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.

18.11.07, 01:40	#6 (permalink)
Harry Boeck Registriert seit: 17.02.06 Likes: 0	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.

20.11.07, 01:12	#10 (permalink)
Zwirni Registriert seit: 20.01.03 Likes: 0	Diese da in dem Beispiel auf die sich der erste Satz bezieht ... ?! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Wobei man auch <span /> schreiben könnte, was aber mE ältere Browser missverstehen könnten. Siehe auch: http://www.edition-w3c.de/TR/2002/RE...heading-4.6%A0 http://de.selfhtml.org/html/xhtml/un...leere_elemente http://meiert.com/de/publications/tr...html-vs-xhtml/

18.11.07, 01:38	#5 (permalink)
Zwirni Registriert seit: 20.01.03 Likes: 0	@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.

19.11.07, 09:10	#7 (permalink)
aYone Registriert seit: 21.02.07 Likes: 0	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 -

20.11.07, 01:14	#11 (permalink)
LX Moderator Registriert seit: 14.02.06 Likes: 21	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). __________________ "Ever tried. Ever failed. No matter. Try again. Fail again. Fail better." - Samuel Beckett* JS BB LX UP

20.11.07, 06:47	#12 (permalink)
.:L Senior Member Registriert seit: 05.05.06 Likes: 24	benutze zur Zeit ein JS, funktioniert aber tragischer Weise nur in Opera... bei Interesse kram ichs dir ma raus MfG __________________ fat people are hard to kidnap

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Daten wieder sichtbar machen ?	SystemShock	(In)security allgemein	9	13.10.06 10:08
Messenger Kontakte sichtbar machen trotz Blockade	tigeremalo	Applikationen	1	28.07.06 09:01
Real-IP sichtbar machen	Lami12	(In)security allgemein	6	05.04.05 16:16
Bild Mouseover ==> anderes Bild	Flou	(Web-) Design und webbasierte Sprachen	9	29.06.02 15:48
Wie kann ich Unbekannte Teilnehmer sichtbar machen?	BLaCK SaTaN	Off topic-Zone	10	31.10.01 13:48

[HaBo]

Bild Sichtbar machen bei mouseover