✔ Rollover :(

[PinG-Holy-Ghost]

Hi Leutz,
Ich hab nen Problem mit meiner Navi...
Der einzelne Menüpunkt besteht aus einer Tabelle mit einer Hintergrundgrafik und einem Text der dann auf das image "geschrieben" wird. Die gesamte Tabelle stellt einen Link dar, der dann zur gewünschten site weiterleitet, allerdings funktioniert der MouseOver nich...

Hier mal die, wie ich denke, wichtigen Code-Scnippsel:

<script>
var a
a= new Array();
a[0]=new Image;
a[0].src="images/button1.jpg";
a[1]=new Image;
a[1].src="images/button2.jpg";

<!-- Die beiden Images werden vorgeladen und in einem Array gespeichert.. -->


<!-- Die Funktion, die den rollover vollenden soll: -->

function roll(img,nb) {
    eval("img.background=a["+nb+"].src");
}
</script>

<!-- und hier die Tabelle mit der Grafik... -->


<a href="?site=news" onmouseover="roll(news,1)" onmouseout="roll(news,0)"><table name=news background=images/button1.jpg height=25 border=0 bordercolor=#FFFFFF rules='groups' width=150><tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;News</td></tr></table></a>

Obwohl das hier etwas komisch dargestellt wird (s.o.), kann ich sagen, dass der Link funktioniert...

Bewundern könnt ihr das unter http://neu.teamping.de

Ich hoffe ihr könnt mir helfen, und ich bedanke mich schon mal im voraus..

 

[Gumbo]

Ein Block-Level-Element in einem Inline-Element – einfach nur grausam.

Das Ganze kann auch ohne JavaScript realisiert werden. Probier mal Folgendes:

<a href="?site=news" id="nav-news">News</a>

Dazu noch folgendes Stylesheet:

a#nav-news {
	padding-left: 3em;
	background: url(images/button1.jpg) no-repeat;
}
a#nav-news:hover {
	background-image: url(images/button2.jpg);
}

Die Polsterung kannst du mit der Polstereigenschaft verändern.

 

[Sven Mintel]

Hallo...

Tabellen besitzen lt. HTML weder ein name-Attribut, noch dürfen sie innerhalb eines Links vorkommen. Ändere das bitte erstmal...dann können wir weiterschauen

 

[PinG-Holy-Ghost]

Danke für deine Hilfe Gumbo, das hat mir sehr geholfen...
Vllt liegts daran, dass ich keine Ahnung von CSS hab, aber leider sieht es nich ganz so aus wie ich es mir gedacht hab Es funktioniert kein frage, aber leider liegt ein bild auf dem andern http://neu.teamping.de Ich hab die paddings ein bischen angepasst so dass es eigentlich ganz gut is, nur leider übereinander...

<style>
a#nav {
	padding-left: 2em;
	padding-right: 6em;
	padding-top: 3px;
	padding-bottom: 3px;
	background: url(images/button1.jpg) no-repeat;
}
a#nav:hover {
	background-image: url(images/button2.jpg);
}
</style>

<!-- Wie du vllt siehst hab ich das etwas angepasst,
zum Beispiel den Namen etwas verallgemeinert,
damit es auch auf die anderen Menüpunkte zutrifft -->

<a href="?site=news" id="nav">News</a>
<a href="?site=articels" id="nav">Articles</a>
<a href="?site=events" id="nav">Events</a>

Meine (hoffentlich) vorerst letzte frage: wie behebe ich das problem, dass sich die Bilder überlappen? (See @ http://neu.teamping.de )

 

[Gumbo]

Weise den a-Elementen mal Block-Level-Charakteristika zu (display:block) und schließlich die Dimensionen der Hintergrundgrafik zu.

 

[PinG-Holy-Ghost]

thx Gumbo, es funktioniert jetz

 

[Maik]

Ich schiebe den Thread mal nachträglich ins CSS-Board und möchte dich darauf hinweisen, daß die ID #nav nur einmal in dem Dokument vergeben werden darf. Verwende also stattdessen die CSS-Klasse .nav für die Links:

a.nav { /* CSS-Formatierungen */ }
a.nav:hover { /* CSS-Formatierungen */ }

<a href="?site=news" class="nav">News</a>
<a href="?site=articels" class="nav">Articles</a>
<a href="?site=events" class="nav">Events</a>

 

[PinG-Holy-Ghost]

Danke ich habs jetz als class drin und es funktioniert einwandfrei. Ich danke euch für die schnelle Hilfe
HF&GL