Mouseover, onClick, Problem...

iceQ7 · 6. Dezember 2011

Hallo zusammen,

ich bastel gerade ein wenig an einem Intranet und hänge derweil an der Navigationsleiste fest. Ich habe Bilddateien als Buttons, einmal normal und einmal für Mousover und onClick.

Das ganze verpackt mit einem kleinen Stück Javascript. Soweit funktioniert der Mouseover auch, sowie der onClick, doch sobald ich auf einen Button geklickt habe und auf einen anderen Button klicke, bleibt der onClick-Button bestehen, was natürlich doof ist.

So sieht's aus: http://img7.imagebanana.com/img/uqz9f0oi/navifail.png

Ich denke, ich könnte das beheben indem ich im Java-Script einen Befehl hinzufüge, um bei einem erneuten onClick wieder alle Buttons auf den Standard zurück zu setzen, jedoch habe ich überhaupt keine Ahnung wie das funktioniert.

Ich würde mich wahnsinnig freuen, wenn ihr mir dabei helfen könntet.

Der Quellcode dazu:

<html>

<head>

<title></title>

<script language="JavaScript">

<!--

current1 = new Image();

current1.src = "nav/news.png";

over1 = new Image();

over1.src = "nav/news_mo.png";


current2 = new Image();

current2.src = "phone.png";

over2 = new Image();

over2.src = "phone_mo.png";


current3 = new Image();

current3.src = "management.png";

over3 = new Image();

over3.src = "management_mo.png";


current4 = new Image();

current4.src = "sales.png";

over4 = new Image();

over4.src = "sales_mo.png";


current5 = new Image();

current5.src = "marketing.png";

over5 = new Image();

over5.src = "marketing_mo.png";


current6 = new Image();

current6.src = "it.png";

over6 = new Image();

over6.src = "it_mo.png";


current7 = new Image();

current7.src = "finance.png";

over7 = new Image();

over7.src = "finance_mo.png";


current8 = new Image();

current8.src = "help.png";

over8 = new Image();

over8.src = "help_mo.png";


function over(imgID,imgObjName) {

document.images[imgID].src = eval(imgObjName + ".src")

}

//-->

</script>

</head>

<body>

<center>

<a href="news.htm" target="Main" onmouseover="over('banner1','over1');" onmouseout="over('banner1','current1')" onclick="current1.src=over1.src;over('banner1','over1');"><img src="nav/news.png" border="0" alt="" id="banner1"></a>

<a href="hpeu/phone/phone.html" target="Main" onmouseover="over('banner2','over2');" onmouseout="over('banner2','current2')" onclick="current2.src=over2.src;over('banner2','over2');"><img src="phone.png" border="0" id="banner2"></a>

<a href="management.htm" target="Main" onmouseover="over('banner3','over3');" onmouseout="over('banner3','current3')" onclick="current3.src=over3.src;over('banner3','over3');"><img src="management.png" border="0" id="banner3"></a>

<a href="sales.htm" target="Main" onmouseover="over('banner4','over4');" onmouseout="over('banner4','current4')" onclick="current4.src=over4.src;over('banner4','over4');"><img src="sales.png" border="0" id="banner4"></a>

<a href="marketing.htm" target="Main" onmouseover="over('banner5','over5');" onmouseout="over('banner5','current5')" onclick="current5.src=over5.src;over('banner5','over5');"><img src="marketing.png" border="0" id="banner5"></a>

<a href="it.htm" target="Main" onmouseover="over('banner6','over6');" onmouseout="over('banner6','current6')" onclick="current6.src=over6.src;over('banner6','over6');"><img src="it.png" border="0" id="banner6"></a>

<a href="fi.htm" target="Main" onmouseover="over('banner7','over7');" onmouseout="over('banner7','current7')" onclick="current7.src=over7.src;over('banner7','over7');"><img src="finance.png" border="0" id="banner7"></a>

<a href="help.htm" target="Main" onmouseover="over('banner8','over8');" onmouseout="over('banner8','current8')" onclick="current8.src=over8.src;over('banner8','over8');"><img src="help.png" border="0" id="banner8"></a>

</center>

</body>

</html>

Ich danke euch im Voraus!

Dragon8 · 6. Dezember 2011

Gibt es einen bestimmten Grund, warum du das gerade mit JavaScript versuchst zu lösen?

Denn mit CSS und den Pseudoelementen :hover und vielleicht :active sollte das einfacher und eleganter zu lösen sein.

Bearbeitet 6. Dezember 2011 von Dragon8

Sacaldur · 7. Dezember 2011

dem kann ich nur zustimmen

du solltest es in jedem Fall nicht mit JavaScript, sondern mit CSS lösen, da das, was du vor hast Teil der Darstellung der Seite ist und somit (bei sauberer Trennung) auch in diesen Teil (CSS) landen muss

du solltest auch schauen, ob du es hinbekommst, die Bilder nicht direkt in die HTML-Datei einzubinden, sondern über CSS einzubinden

(HTML ist zur Speicherung der Daten, weshalb auch diese Aufgabe mit CSS gelöst werden sollte)

grundsätzlich ist das möglich

du kannst dir auch die Seite CSS-Zen-Graden ansehen, bei dem eine meines Erachtens saubere Trennung durchgeführt wurde

veranschaulicht wird das dadurch, dass man für ein komplett anderes Layout nur eine andere Stylesheet-Datei benötigt

iceQ7 · 7. Dezember 2011

Vielen Dank erstmal für die Antworten,

Hover, Active etc. sagt mir was, denooch habe ich das Problem, dass es 8 normale Buttons sind (in rot) und 8 weitere Buttons beim Mouseover, welche auch fürs onClick benutzt werden sollten (in dunkelrot).

Jetzt ist mein Problem, wie ich diese 16 Buttons in ein CSS-Sheet mit oben genannten Hover, Active usw. integrieren soll, da ich da nicht gerade der Spezialist bin.

Gibt's zu meiner Spezifikation dann auch Möglichkeiten?

etreu · 7. Dezember 2011

SELFHTML: Stylesheets / CSS-Eigenschaften / Pseudoelemente und Pseudoklassen

Jetzt must du nur noch den Hintergrund tauschen und fertig.

Dragon8 · 7. Dezember 2011

Wenn du es dir einfach machen willst, dann nimmst du auch nicht 8 verschiedene Grafiken jeweils für Normal und Hover, sondern du nimmst 1 Hintergrundgrafik (ohne Text) für die normalen Buttons und eine Hintergrundgrafik für Hover. Der darzustellende Text steht dann in der HTML Datei. Das Element hat dann eine von dir gewählte Klasse und wie die Elemente auszusehen haben, legst du dann über CSS fest.

Aussehen könnte das dann zB so:


<html>

<head>

<link rel="stylesheet" href="css.css" type="text/css">

</head>

<body>

<a href="news.htm" target="Main" class="banner">News</a>

<a href="hpeu/phone/phone.html" target="Main" class="banner">Phone</a>

<a href="management.htm" target="Main" class="banner">Management</a>

</body>

</html>

a.banner {

	background-image: url("banner.png");

	color: white;

	width: 80px;

	height: 33px;

	text-decoration: none;

	text-align: center;

	font-weight: bold;

	font-family: Tahoma, Arial, sans-serif;

	padding: 5px;


}

a.banner:hover {

	background-image: url("banner_hover.png");

}

iceQ7 · 15. Dezember 2011

So, ich hab mich jetzt noch einmal hingehockt und das ganze etwas verändert, mit Subnav. Soweit gefällt mir das Ganze auch, MouseOver usw., jedoch hätte ich es gerne, wenn ich in der Navigatorleiste auf eine Option klicke, sollte das Submenü aufgehen. Bisher geht es schon per MouseOver auf, was ich - wie gesagt - gerne anders hätte. Der Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8;charset=utf-8" />

<style type="text/css">

body {

	font: 10px normal Verdana, Arial, Helvetica, sans-serif;

	margin: 0;

	padding: 0;

}

h1 {

	font: 4.7em normal Georgia, 'Times New Roman', Times, serif;

	color: #333;

	margin: 0;

	padding: 5px 0;

}

h1 small{

	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;

	text-transform:uppercase;

	letter-spacing: 1.5em;

    display: block;

	color: #fff;

}

.container {width: 970px; margin:  auto;}




ul#topnav {

	margin: 0px; padding: 0px;

	width: 816px;

	height: 35px;

	position: relative;

	font-size: 1.2em;

	background:url(images/topnav_s.png) repeat-x;

	text-align: center;

}

ul#topnav li {

	float: left;

	margin: 0px; padding: 0px;

	width: 100px;

	border-right: 1px solid #AAA;

	border-left: 1px solid #AAA;

	border-bottom: 1px solid #AAA;


}

ul#topnav li a {

	padding: 10px;

	display: block;

	color: #f0f0f0;

	text-decoration: none;

}

ul#topnav li:active { background: url(images/topnav_a.png) repeat-x; }

ul#topnav li span {

	float: left;

	padding: 7px 0;

	position: absolute;

	left: 0; top: 35px;

	display: none;

	width: 814px;

	background: #C50E1F;

	color: #fff;

	text-align: left;

	border-right: 1px solid #AAA;

	border-left: 1px solid #AAA;

	border-top: 1px solid #AAA;

	border-bottom: 1px solid #AAA;

	-moz-border-radius-bottomright: 5px;

	-khtml-border-radius-bottomright: 5px;

	-webkit-border-bottom-right-radius: 5px;

	-moz-border-radius-bottomleft: 5px;

	-khtml-border-radius-bottomleft: 5px;

	-webkit-border-bottom-left-radius: 5px;

}

ul#topnav li:hover span { display: block; }

ul#topnav li span a { display: inline; }

ul#topnav li span a:hover {text-decoration: underline;}

</style>

<script type="text/javascript"

src="images/jquery.js"></script>

<script type="text/javascript">

$(document).dblclick(function() {


$("ul#topnav li").dblclick(function() { //Hover over event on list item

	$(this).css({ 'background' : 'url(images/topnav_a.png) repeat-x'}); //Add background color + image on hovered list item

	$(this).find("span").show(); //Show the subnav

} , function() { //on hover out...

	$(this).css({ 'background' : 'none'}); //Ditch the background

	$(this).find("span").hide(); //Hide the subnav

});


});

</script>


</head>


</head>


<body>

<br>


<div class="container">


    <ul id="topnav">

        <li>

            <a href="#">News</a>

        </li>

        <li>

            <a href="#">Phone</a>

            <span>

                <a href="">HPD</a> |

                <a href="">HPF</a> |

                <a href="">HPI</a>

            </span>

        </li>

        <li>

            <a href="">Management</a>

            <span>

                <a href="">What We Do</a> |

                <a href="">Our Process</a> |

                <a href="">Testimonials</a>

            </span>

        </li>

        <li>

            <a href="">Sales</a>

            <span>

                <a href="">Web Design</a> |

                <a href="">Development</a> |

                <a href="">Identity</a> |

                <a href="">SEO & Internet Marketing</a> |

                <a href="">Print Design</a>

            </span>

        </li>

        <li><a href="">Marketing</a></li>

        <li>

            <a href="">IT</a>

            <span>

                <a href="">Web Design</a> |

                <a href="">Development</a> |

                <a href="">Identity</a> |

                <a href="">SEO & Internet Marketing</a> |

                <a href="">Print Design</a>

            </span>

        </li>

        <li>

            <a href="">Finance</a>

            <span>

                <a href="">Web Design</a> |

                <a href="">Development</a> |

                <a href="">Identity</a> |

                <a href="">SEO & Internet Marketing</a> |

                <a href="">Print Design</a>

            </span>

        </li>

        <li>

            <a href="">Help</a>

            <span>

                <a href="">Web Design</a> |

                <a href="">Development</a> |

                <a href="">Identity</a> |

                <a href="">SEO & Internet Marketing</a> |

                <a href="">Print Design</a>

            </span>

        </li>

    </ul>



</div>


</body>

</html>

Hat jemand eine Idee, was ich ändern muss, dass das Submenü nur per onclick aufgeht und sich erst wieder schließt, wenn man auf die Option drüber klickt oder eine andere?

FfFCMAD · 15. Dezember 2011

Wie waere es mit onmouseout, um den alten Zustand des Elements wieder herzustellen?

Bei einem Button wuerde ich es so machen:

Onmouseover >>

Onmouseclick >>

Onmouseout >>

Und das braucht kein zusaetzliches Javascript, das ist doppelt gemoppelt.

Bearbeitet 15. Dezember 2011 von FfFCMAD

Anmelden

Mouseover, onClick, Problem...

Empfohlene Beiträge

iceQ7

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dragon8

Link zu diesem Kommentar

Auf anderen Seiten teilen

Sacaldur

Link zu diesem Kommentar

Auf anderen Seiten teilen

iceQ7

Link zu diesem Kommentar

Auf anderen Seiten teilen

etreu

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dragon8

Link zu diesem Kommentar

Auf anderen Seiten teilen

iceQ7

Link zu diesem Kommentar

Auf anderen Seiten teilen

FfFCMAD

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de