link werkt niet in IE9 wel met combatibiliteit. Waarschijnlijk simpel.

[BJMarc]

Ik heb een aantal van de volgende links in een ge-include php pagina staan.
In alle browers die ik test werkt het, alleen die *!@#* IE doet het allen in compatibiliteitsmodus.
Wellicht is er een simpele oplossing, en kan dit makkelijker met gebruik van css.

Ik hoop dat jullie kunnen helpen.

<a href="link1.php" target="_self" class="link">
	<div class="merken">
		<img src="images/link1.png" onmouseover="this.src='images/link1_purple.png'" onmouseout="this.src='images/link1.png'" />
	</div>
</a>

De link werkt overigens wel als ik net buiten de in de css aangegeven ruimte voor de images ga. De werking van de images alszijnde de link werken dus niet.

 

[Naarling]

Wat je daar doet hoort ook niet, tenzij je je pagina in HTML5 maakt mag je geen blok elementen (zoals een div) in een link zetten. Dus geen wonder dat er browsers in de war raken.

 

[BJMarc]

Ik wist wel dat het makkelijk was, maar zat me blind te staren.
Div'jes erbuiten gegooid en nu werkt het wel.

Dank

 

[csshunter]

Hoi BJMarc,

... kan dit makkelijker met gebruik van css.

Het werkt nu goed met de javascript-hovers, maar dat kan je inderdaad missen als je er css-hovers van maakt > mooiere html-code, en werkt ook als js uit staat.
De class="link" bij elke <a> kan je missen, als je daarvan een universele opdracht voor alle <a>'s uit het menu maakt (via de <ul id="menu">).
Het target="_self" kan je ook nog missen als je niet met frames werkt.

<ul id="menu">
    <li><a id="link1" href="link1.php" target="_self"></a></li>
    <li><a id="link2" href="link1.php" target="_self"></a></li>
    ... enz.
</ul>

En in de css worden de images er in gezet als background-images:

#menu a {
    ...
    width: ...px;   /* breedte img */
    height: ...px;  /* hoogte img  */
    display: block; /* eventueel: inline-block, hangt v/d rest af */
    }

a#link1       { background: url(images/link1.png); }

a#link1:hover, 
a#link1:focus { background: url(images/link1_purple.png); }

a#link2       { background: url(images/link2.png); }

a#link2:hover, 
a#link2:focus { background: url(images/link2_purple.png); }

enz.

Wil je het helemaal super doen, voor een snellere pagina, dan kan je alle images + alle hover-varianten in één gecombineerde "css-sprite" zetten: een blokje knoppen.

Voor de toegankelijkheid kan je tenslotte binnen elke link een <span class="hidden">...</span> opnemen met op de stippeltjes de naam van de betreffende pagina: dan weten mensen met een text-browser of een voorlees-browser ook waar de link naar toe gaat.

Met vriendelijke groet,
CSShunter