Span class försvinner vid mouse over

vad gör dessa? onMouseOver="funSubMouseOver(this.id);" onMouseOut="funSubMouseOut(this.id);"

och varför krångla till länkarna med divvar och span ?

Som phred skriver

<a href="">
	<div id="sub2" onMouseOver="funSubMouseOver(this.id);" onMouseOut="funSubMouseOut(this.id);" class="image_out">
	<span class="alignButtonText">FOTOALBUM</span>
	</div>
	</a>

Skulle mycket väl kunna vara:

<a href="#" id="sub2" class="image">Fotoalbum</a>

<a href="#" id="sub2" class="image selected">Fotoalbum</a>

för "aktiv" sida.
och css kod:

a.image {
	background-image:url([url]http://mattiasnordin.net/web08/_design/menobj_blankbox_0.gif);[/url]
	background-repeat:no-repeat;
	color:#395173;
	font-family:Calibri,tahoma;
	font-size:11px;
	font-weight:bold;
	height:26px;
	text-align:center;
	text-decoration:none;
	width:112px;
	display:block;
	vertical-align: middle;
	line-height:26px;
	text-transform: uppercase;
}
a.image:hover
{
	background-image:url([url]http://mattiasnordin.net/web08/_design/menobj_blankbox_1.gif);[/url]
}

a.image:active, a.selected {
	background-image:url([url]http://mattiasnordin.net/web08/_design/menobj_blankbox_2.gif);[/url]
}

Tack för eran hjälp. Jag är självlärd (det lilla jag kan) på CSS och när saker fungerar brukar jag nöja mig med det trots att det inte alltid är rätt lösning.

Koden ovan är ju mycket snyggare. Jag har testat den här:
http://mattiasnordin.net/web08/t1/Mattias/Nordin/test.asp

Jag antar dock att jag fortfarande måste använda javascript för att hindra hover-effekten på knapp D (vald knapp). Jag vill även kunna köra några externa funktioner på mouseOver eventet. Tex toggle()-funktionen.

Mitt javascript ser ut så här:

<script type="text/javascript">
var varSelectedSubTabsString = ""
function funSelectSubTab(subX){								// Flera flikar kan markeras samtidigt. Anropas med funSelectSubTab("sub1,sub4"). Använd EJ mellanslag.
	var loop_num = 0;
	var aSelTabArray = subX.split(",");						// Kontrollerar om flera flikar ska vara markerade.
	while(loop_num < aSelTabArray.length){					// Lopar igenom alla flikar och sätter vald bild.
		varSelectedTabId = aSelTabArray[loop_num];
		//varSelectedTabId = varSelectedTabId.charAt(3)		// Hämtar tecken nummer tre i id namnet
		document.getElementById(varSelectedTabId).className = 'image_selected'	// Ändrar CSS style på vald DIV...
	loop_num+=1;
	}
	varSelectedSubTabsString = subX							// Sparar valda bilder i en sträng så att dessa kan ignoreras vid mouse over funktionen.
}

function funSubMouseOver(subX){
	if((varSelectedSubTabsString.indexOf(subX)) < 0){ 		// Testar om x namnet finns i strängen över valda bilder. Skippa om true.
	document.getElementById(subX).className = 'image_over'	// Ändrar CSS style på vald DIV...
	toggle(document.getElementById("godsEye"), false);		// Leker med bilder...
	}
}

function funSubMouseOut(subX){						
	if((varSelectedSubTabsString.indexOf(subX)) < 0){ 		// Testar om x namnet finns i strängen över valda bilder. Skippa om true.
	document.getElementById(subX).className = 'image_out'	// Ändrar CSS style på vald DIV...
	toggle(document.getElementById("godsEye"), true);		// Leker med bilder...
	}
}
</script>

På varje sida kan jag ladda valda knappar om jag så önskar med:

<script type="text/javascript" language="javascript">funSelectSubTab("sub1,sub4")</script>

Menysystemet inkluderar jag på samtliga sidor för att det ska vara enkelt att underhålla det.

Kom gärna med synpunkter. Jag ska prova att se om grundproblemet försvinner om jag tar och fixar till CSS koden enligt ovan och tar bort min span (som hade uppgiften att justera texten).

:)

Ändra bara:

a.image:active, a.selected {
	background-image:url([url]http://mattiasnordin.net/web08/_des...lankbox_2.gif);[/url]
}

till:

a.image:active, a.selected[b], a.selected:hover[/b] {
	background-image:url([url]http://mattiasnordin.net/web08/_des...lankbox_2.gif);[/url]
}

kanske måste ha float:left på a taggen i början för att få så att din text listas brevid varandra med. och när du vill "bryta" din meny:

<div style="clear:both;"></div>

(eller lägg den i en klass).

Idag lärde jag mig något nytt! Tackar för det.

Skrev ihop en liten guide för hur mitt menysystem fungerar om det är någon annan noob (som jag) som vill kopiera konceptet. Sidan kan tänkas att flytta på sig så då får ni leta om jag inte kommer ihåg att fixa denna länk.

CSS-baserat menysystem:
http://mattiasnordin.net/web08/t2/utveckling.asp

Ett annat exempel på hur man kan göra utan tabeller (Ingen Java skript på exemplet):

a.image {
	background-image: url([url]http://mattiasnordin.net/web08/_design/menobj_blankbox_0.gif);[/url]
	background-repeat: no-repeat;

	color: #395173;
	font-family: Calibri,tahoma;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	line-height: 26px;
	text-transform: uppercase;
	
	height: 26px;
	width: 112px;
	display: block;
	margin: 0 5px; /* Ge lite luft höger & vänster om länkarna */
}
a.image:hover
{
	background-image:url([url]http://mattiasnordin.net/web08/_design/menobj_blankbox_1.gif);[/url]
}

a.image:active, a.selected, a.selected:hover {
	background-image:url([url]http://mattiasnordin.net/web08/_design/menobj_blankbox_2.gif);[/url]
}

.clear{
	clear:both;
}
.float-left a.image {
	float: left;
}

Lista brevid varandra:

<div class="f-left">
	<a href="#" class="image" id="test1">a</a>
	<a href="#" class="image" id="test2">b</a>
	<a href="#" class="image" id="test3">c</a>
	<a href="#" class="image" id="test4">d</a>
	<a href="#" class="image" id="test5">e</a>
	<div class="clear"></div>asd
</div>

Lista på höjden:

<div>
	<a href="#" class="image" id="test1">a</a>
	<a href="#" class="image" id="test2">b</a>
	<a href="#" class="image" id="test3">c</a>
	<a href="#" class="image" id="test4">d</a>
	<a href="#" class="image" id="test5">e</a>
</div>

Fin guide annars ;)

Kanske borde skapa en ny tråd för detta, men jag vill basera det hela på din lösning ovan.

Kan man placera flera bakgrunder brevid varandra i en CSS klass?

Jag försöker hitta på ett fiffigt sätt att skapa en dynamisk knapp som dras ut på bredden beroende på hur mycket text men skriver i den.

A och C = start och slut bild
B = Bakgrundsbild

Vill att bilder A + B + C ska ligga brevid varandra där bakgrund B är dynamisk i bredd.

:)

RED: Läste på ett annat forum att det inte verkar vara supporterat med flera bilder i en class. Med javascript kan jag få till det jag vill men det skulle vara snyggt om det gick med ren CSS.

<img src="start.gif"><a href="#" class="image">Det var en gång en åsna</a><img src="end.gif">

+ Javascript som byter src på alla tre vid mouse over. Men här börjar jag vara tillbaka mot funktionaliteten som jag postade i början av tråden. :bla

<a href="#"><div class="left"></div>Länk<div class="right"></div></a>

och kör css:

a:hover div.left {background: url(bgleft_hover.png);}

dock har jag för mig att det inte fungera 100% i IE6.

Det behöver inte fungera för mig i IE6. Det är ok.

Men jag får det inte att fungera i IE7 heller. Hoover effekten fungerar men div.left (samt div.right) bilden visas aldrig för mig.