Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

Mischap · 31-03-2009, 18:45

Hi

ich sitze und überlege mir wie man sowas am besten lösen kann,
was bei http://web.de/zu sehen ist.
Wenn man in der mitte, per mouseover auf die 3 news geht - dann springen die ja so auf.

Soweit ich weiss benutzt man da die innerHTML funcktion von JS.
Aber irgendwie machen die das anders - über <ul>... und css classenzuweisung.

Könnte mir vielleicht jemand erklären was da der unterschied ist?

vielen Dank im Voraus

Grüsse - Mischa

boreker · 31-03-2009, 19:46

das bsp auseinanderzupflücken war mir zu aufwendig, aber ich habe dir ein bsp
gebaut, dass wohl ziemlich genau deinem bsp entspricht?
mein bsp sollte man wohl noch auf crossbrowsertauglichkeit prüfen.

das prinzip ist simpel. per rollover wird ein listenobjekt auf height: 0 gesetzt und dafür ein anderes zuvor unsichtbares auf height: 100 gesetzt......

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function fc_blow(nr){
	if(nr == '1'){
		document.getElementById('li_1').style.height="0px";
		document.getElementById('li_2').style.height="100px";
		document.getElementById('li_3').style.height="20px";
		document.getElementById('li_4').style.height="0px";
	}
	if(nr == '3'){
		document.getElementById('li_1').style.height="20px";
		document.getElementById('li_2').style.height="0px";
		document.getElementById('li_3').style.height="0px";
		document.getElementById('li_4').style.height="100px";
	}
}
</script>

<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#li_1{
	height: 20px;
	background-color:#33F;
	overflow: hidden;
}
#li_2{
	height: 20px;
	background-color:#3FF;
	height: 0px;
	overflow: hidden;	
}
#li_3{
	height: 20px;
	background-color:#C63;	
	overflow: hidden;	
}
#li_4{
	height: 20px;
	background-color:#CF6;
	height: 0px;
	overflow: hidden;	
}
-->
</style>
</head>
<body>
<ul>
  <li id="li_1" onmouseover="fc_blow('1')">nur ein testinhalt</li>
  <li id="li_2">nur ein testinhalt<br /><br />und mehr</li>
  <li id="li_3" onmouseover="fc_blow('3')">nur ein weiterer  testinhalt</li>
  <li id="li_4">nur ein  weiterer testinhalt<br /><br />und mehr</li>
</ul>    
</body>
</html>

greez, boreker

Mischap · 31-03-2009, 19:56

Riesen DANK!!
..aha also könnte man auch alles vorfertigen und per className die klasse zuweisen. ok...

also man arbeitet nicht mit innerHTML in solchen Fällen?

Nightflyer · 31-03-2009, 20:50

Sieht mir jetzt auch eher nach innerHTML aus da der Text beim Mouseover ja nicht derselbe bleibt sondern ersetzt wird. Der Alternativcontent ist da wohl in einem Array gespeichert und wird beim Mousover ersetzt.

Mischap · 31-03-2009, 21:40

danke.

ja hab ich mir auch gedacht, aber kann auch sein dass die beim rollout doch die höhe und breite auf einen wert beschrenken, so dass nur ein kleiner wert vom text zu sehen ist.

Nightflyer · 31-03-2009, 23:02

http://docs.jquery.com/Events/mouseover#fn
http://docs.jquery.com/Manipulation/replaceWith#content

Mischap · 01-04-2009, 07:28

wow,

beeindruckend! - THX

Mischap · 01-04-2009, 08:40

ah ja das wollte ich noch fragen:

warum benutzt man für sowas immer <ul>.. ?
erfüllt es irgendwelche bedingungen besser als andere tags?

Grüsse - Mischa

Nightflyer · 01-04-2009, 15:23

Eine Liste ist nicht zwingend, aber da du damit die einzelnen Einträge zusammenfasst und damit quasi als Gruppe definierst, sicher besser.

Mischap · 02-04-2009, 15:01

ah ok, verstehe

danke

31-03-2009, 18:45	#1 (permalink)
Mischap Pitaniker Registriert seit: Mar 2002 Ort: Wiesbaden Beiträge: 506	blowup Hi ich sitze und überlege mir wie man sowas am besten lösen kann, was bei http://web.de/zu sehen ist. Wenn man in der mitte, per mouseover auf die 3 news geht - dann springen die ja so auf. Soweit ich weiss benutzt man da die innerHTML funcktion von JS. Aber irgendwie machen die das anders - über <ul>... und css classenzuweisung. Könnte mir vielleicht jemand erklären was da der unterschied ist? vielen Dank im Voraus Grüsse - Mischa __________________ nicht zu viel denken, handeln. www.pitanik.de \| www.fine-art-images.net

31-03-2009, 19:56	#3 (permalink)
Mischap Pitaniker Registriert seit: Mar 2002 Ort: Wiesbaden Beiträge: 506	Riesen DANK!! ..aha also könnte man auch alles vorfertigen und per className die klasse zuweisen. ok... also man arbeitet nicht mit innerHTML in solchen Fällen? __________________ nicht zu viel denken, handeln. www.pitanik.de \| www.fine-art-images.net

31-03-2009, 20:50	#4 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Sieht mir jetzt auch eher nach innerHTML aus da der Text beim Mouseover ja nicht derselbe bleibt sondern ersetzt wird. Der Alternativcontent ist da wohl in einem Array gespeichert und wird beim Mousover ersetzt. __________________ (\__/) (='.'=) (")_(")

31-03-2009, 21:40	#5 (permalink)
Mischap Pitaniker Registriert seit: Mar 2002 Ort: Wiesbaden Beiträge: 506	danke. ja hab ich mir auch gedacht, aber kann auch sein dass die beim rollout doch die höhe und breite auf einen wert beschrenken, so dass nur ein kleiner wert vom text zu sehen ist. __________________ nicht zu viel denken, handeln. www.pitanik.de \| www.fine-art-images.net

31-03-2009, 23:02	#6 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	http://docs.jquery.com/Events/mouseover#fn http://docs.jquery.com/Manipulation/replaceWith#content __________________ (\__/) (='.'=) (")_(")

01-04-2009, 07:28	#7 (permalink)
Mischap Pitaniker Registriert seit: Mar 2002 Ort: Wiesbaden Beiträge: 506	wow, beeindruckend! - THX __________________ nicht zu viel denken, handeln. www.pitanik.de \| www.fine-art-images.net

01-04-2009, 08:40	#8 (permalink)
Mischap Pitaniker Registriert seit: Mar 2002 Ort: Wiesbaden Beiträge: 506	ah ja das wollte ich noch fragen: warum benutzt man für sowas immer <ul>.. ? erfüllt es irgendwelche bedingungen besser als andere tags? Grüsse - Mischa __________________ nicht zu viel denken, handeln. www.pitanik.de \| www.fine-art-images.net

01-04-2009, 15:23	#9 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Eine Liste ist nicht zwingend, aber da du damit die einzelnen Einträge zusammenfasst und damit quasi als Gruppe definierst, sicher besser. __________________ (\__/) (='.'=) (")_(")

02-04-2009, 15:01	#10 (permalink)
Mischap Pitaniker Registriert seit: Mar 2002 Ort: Wiesbaden Beiträge: 506	ah ok, verstehe danke __________________ nicht zu viel denken, handeln. www.pitanik.de \| www.fine-art-images.net

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