[JS]Image change werkt niet.

[Erkel]

Geachte medetweakers,

Ik heb een probleempje met mijn javascript. Het is een simpel scriptje maar ik kom er niet uit. Ik zal eerst even uitleggen wat de situatie is:

Ik ben momenteel bezig het een nieuw design voor een website, en deze website maakt gebruik van tabjes voor de pagina's. Een tabje bestaat uit een div met een background image, en kan in drie verschillende 'staten' zijn:

-Actief (Dan staat de achtergrond afbeelding op "tabnaam_active.gif")
-Niet Actief (Geen afbeelding)
-mouseover (Achtergrond afbeelding staat op "tabnaam_over.gif")

Nu heb ik een probleem met het laatste stuk. Om de afbeelding te veranderen heb ik gebruikgemaakt van onmouseover en onmouseout. De onmouseover en onmouseout worden op de volgende manier aangeroepen:

JavaScript:

onMouseOver="showOver('support')" 
onMouseOut="hideOver('support')"

Ik had eerst een script dat wel werkte maar 1 probleem had. Als je met de muis over de active tab ging werd daarna ook die tab op "geen achtergrond" gezet. Die code staat hieronder:

JavaScript:

function showOver(str){
document.getElementById(str).style.backgroundImage = "url('images/"+ str +"_over.gif')";
}
function hideOver(str){
document.getElementById(str).style.backgroundImage = "";
}

Omdat het bovenstaande niet het gewenste resultaat gaf, dacht ik dat vergelijk ik de huidige style.backgroundImage waarde om te kijken of deze actief is. Om vervolgens als deze ook daadwerkelijk actief is de achterground zo te laten. Dat is de volgende code:

JavaScript:

function showOver(str){
if (document.getElementById(str).style.backgroundImage == "url('images/"+ str +"_active.gif')") {
document.getElementById(str).style.backgroundImage = "url('images/"+ str +"_active.gif')";
}
else
{
document.getElementById(str).style.backgroundImage = "url('images/"+ str +"_over.gif')";
}

function hideOver(str){
if (document.getElementById(str).style.backgroundImage == "url('images/"+ str +"_over.gif')") {
document.getElementById(str).style.backgroundImage = "";
}
else {
document.getElementById(str).style.backgroundImage = "url('images/"+str+"_active.gif')";
}

Mij probleem is dus dat de vergelijking niet werkt. Ik heb al hulp gevraagd aan de php / js expert hierzo maar die kon zo snel ook niks vinden. Tevens heb ik op internet rondgezocht om te kijken of je backgroundimage waarden kan vergelijken maar kon daar niet veel over vinden.
Ik heb gekeken of de waarden in de vergelijking van style.backgroundImage ook daadwerkelijk zo zijn en dat klopt is zo. Dus de vergelijking zou in principe "true" zijn.

Iemand een suggestie?

Als er iets onduidelijk is laat maar weten dan pas ik het even aan.

[Krooswijk.com]

ik zou zoiets in je css zetten

Cascading Stylesheet:

div.tab {
  width: 100px;
  height: 20px;
  background: url( 'images/tab.gif' ) no-repeat;
}

div.tabactive {
  background: url( 'images/tab-active.gif' ) no-repeat;
  cursor: default;
}

div.tabover {
  background: url( 'images/tab-over.gif' ) no-repeat;
  cursor: pointer;
}

en in je html:

HTML:

<!-- active tab -->
<div id="a" name="a" class="tab tabactive">a</div>
<!-- other tabs -->
<div id ="b" name="b" class="tab" onmouseover="this.className='tab tabover'" onmouseout="this.className=''tab">b</div>

dit kan allemaal nog iets netter, maar het gaat om het principe

[crisp]

Ik zou gewoon :hover gebruiken

En in plaats van losse plaatjes kan je ook een 'sprite' gebruiken en background-position opgeven dat is efficienter, bespaart je HTTP requests en je hoeft niet te preloaden om 'flickering' te voorkomen

[JKVA]

Let wel op met de ondersteuning van hover op niet-A elementen. div:hover werkt niet in IE.

Als je een A gebruikt en daarop de :hover toepast, werkt het wel.
http://www.handleidinghtm...tors06.html#ondersteuning

[crisp]

JKVA schreef op donderdag 10 april 2008 @ 10:10:
Let wel op met de ondersteuning van hover op niet-A elementen. div:hover werkt niet in IE.

Correctie: werkt niet in IE6 en lager, IE7 ondersteund het wel

[JKVA]

crisp schreef op donderdag 10 april 2008 @ 10:12:
[...]

Correctie: werkt niet in IE6 en lager, IE7 ondersteund het wel

Misschien is er iets mis met deze code, maar dit werkt bij mij niet in IE7.

HTML:

<html>
<head>
    <style>
        a:hover {
            color: red;
            background-color: blue;
        }
        p:hover {
            color: green;
            background-color: red;
        }
    </style>
</head>
<body>
    <hr>
    <a href="#">blaat 1</a>
    <hr>
    <p>blaat 2</p>
    <hr>
</body>
</html>

De A hovert wel, maar de P niet. Het is IE 7.0.5730.13.

[crisp]

Zet er eens een doctype boven

[Erkel]

Ik een compleet andere oplossing gevonden dus van mij mag ie op slot. Doe het nu met een php functie.

[Verwijderd]

Erkel schreef op donderdag 10 april 2008 @ 12:42:
Ik een compleet andere oplossing gevonden dus van mij mag ie op slot. Doe het nu met een php functie.

Dat lijkt me niet, want ik vraag me af hoe PHP als server-side taal weet wanneer je over een element in je browser heen gaat Gewoon lekker links met een hover gebruiken zou ik zeggen

[_Thanatos_]

Tijd voor Sliding Doors?

Ik zie tabjes, gehannes met hovers, en oldskool code. Hoogtijd dus

[ Voor 30% gewijzigd door _Thanatos_ op 11-04-2008 02:01 ]

[Erkel]

Verwijderd schreef op donderdag 10 april 2008 @ 14:28:
[...]


Dat lijkt me niet, want ik vraag me af hoe PHP als server-side taal weet wanneer je over een element in je browser heen gaat Gewoon lekker links met een hover gebruiken zou ik zeggen

Dat lijkt me wel:

elke div ziet er zo uit:

HTML:

<div id="support_forum" class="submenu" style="background-image:url(images/<?php getImage('support_forum');?>); 
    width:89px; margin-left:20px;" <?php getActionMouse('support_forum');?> >

Hierbij checkt de functie getImage of de naam van de string (hier: support_forum) de pagina naam matched. En echo-ed daarna de imagenaam. (active of over)

En getActionMouse checked ook of de string de pagina naam matched. En als dat zo is wordt er niks weergegeven en wanneer dat niet het geval is worden de mouseover en mouseout actions teruggestuurd.

[TeeDee]

Ik moet zeggen: het is een vrij creatieve oplossing. Wel enorme overkill... dat wel.

Verwijderd schreef op woensdag 16 april 2008 @ 15:43:
Om niet te beginnen over volledig semantisch incorrect, ontoegankelijk, e.d.

Daar wilde ik het nog niet over hebben, maar daar heb je uiteraard gelijk in.

[ Voor 61% gewijzigd door TeeDee op 16-04-2008 15:58 ]

[Verwijderd]

Erkel schreef op woensdag 16 april 2008 @ 15:38:

worden de mouseover en mouseout actions teruggestuurd.

Oftewel: je doet het gewoon met JavaScript. Dit heeft helemaal niets met PHP te maken natuurlijk, voor mijn part stellen Poolse kabouters een string samen met daarin JS-code.

TeeDee schreef op woensdag 16 april 2008 @ 15:42:
Ik moet zeggen: het is een vrij creatieve oplossing. Wel enorme overkill... dat wel.

Om niet te beginnen over volledig semantisch incorrect, ontoegankelijk, e.d.

[ Voor 28% gewijzigd door Verwijderd op 16-04-2008 15:54 ]