[JS] Div als link

[Rexomnium]

Ik heb de volgende code om een onMouseover voor een div layer te manipuleren:

code:

<div class="artikelblokgeel" 
onMouseover="this.style.backgroundColor='#FFFF99';"
onMouseout="this.style.backgroundColor='#FFFFCC';">
Blabla
</div>

Lijkt me vrij eenvoudig. Als je met er met je muis overgaat, wordt de layer een andere kleur. Ga je er weer vanaf, dan keert hij terug naar z'n oorspronkelijk staat.

Nu wil ik het volgende. Ik wil ten eerste dat mensen erop kunnen klikken. Dat moet uiteraard met de onClick methode. Althans, dat lijkt mij zo. Nu moet de link gewoon in hetzelfde scherm worden geopend (_self). Ik heb werkelijk geen idee hoe ik dat moet doen.

Daarnaast wil ik bij onMouseover dat hij een alt-tekst laat zien en dat de cursor een handje wordt, om aan te geven dat het een link is.

Help eens

[ Voor 6% gewijzigd door Rexomnium op 27-02-2004 20:56 ]

[Blaise]

code:

<div class="artikelblokgeel" title="mouseovertekst" style="cursor:pointer"
onMouseover="this.style.backgroundColor='#FFFF99';"
onMouseout="this.style.backgroundColor='#FFFFCC';"
onClick="location.replace('pagina.html')">
Blabla
</div>

[ Voor 27% gewijzigd door Blaise op 27-02-2004 21:01 ]

[Johnny]

Je hebt helemaal geen <div> of javascript nodig:

code:

<style type="text/css">

artikelBlok.a:link {
background-color: fffcc;
display: block;
}

artikelBlok.a:hover {
background-color: fff99;
}

</style>

<a class="artikelBlok href="pagina.htm" title="tooltiptekst">Blabla</a>

Het is trouwen sniet verstandig om een class een naam als "artikelblokgeel" geeft, want als je dan je site gaat restylen, naar bijvoorbeeld een andere kleurstelling, klopt de naam niet meer, ook is het onnodig om het woord "Blok" er in te hebben, aangezien de tag al een block element is. een blok met als naam "artikelLinkBron" zou logischer zijn, als de link naar de bron verwijst.

[ Voor 10% gewijzigd door Johnny op 27-02-2004 21:04 ]

[drm]

Blaise:

code:

onClick="location.replace('pagina.html')">

offtopic:
Wellicht de moeite waard om even te vermelden dat location.replace geen history entry aanmaakt. Dat is in de meeste gevallen niet wenselijk

[Rexomnium]

Johnny schreef op 27 februari 2004 @ 21:03:
Je hebt helemaal geen <div> of javascript nodig:

code:

<style type="text/css">

artikelBlok.a:link {
background-color: fffcc;
display: block;
}

artikelBlok.a:hover {
background-color: fff99;
}

</style>

<a class="artikelBlok href="pagina.htm" title="tooltiptekst">Blabla</a>

Het is trouwen sniet verstandig om een class een naam als "artikelblokgeel" geeft, want als je dan je site gaat restylen, naar bijvoorbeeld een andere kleurstelling, klopt de naam niet meer, ook is het onnodig om het woord "Blok" er in te hebben, aangezien de tag al een block element is. een blok met als naam "artikelLinkBron" zou logischer zijn, als de link naar de bron verwijst.

Dat laatste is inderdaad een goed punt. Maar ik ben dan ook nog in de testfase en ik moet de CSS namen en de dubbele dingen nog uit het CSS-bestand filteren.

Dat eerste is naar mijn mening niet helemaal aan de orde bij mij, want ik heb niet alleen maar een stukje tekst of zo in de div, maar plaatjes, <p>'s, <h1>'s en <h2>'s.

Over location.replace... die functie had ik ook al gevonden (had ik moeten zeggen, oké), maar die is inderdaad niet de goede voor mij, want ik wil juist wel dat ze in hun history kunnen browsen.

edit:

Laat maar. Het is location.href('url') dat ik moet gebruiken. Bedankt iedereen voor de hulp en zo

Edit 2:
Het is niet location.href, want dat werkt niet non IE 6 browser. Je moet

code:

onclick="document.location=blabla.html'"

gebruiken. Dit voor de searchers onder ons

[ Voor 32% gewijzigd door Rexomnium op 01-03-2004 21:52 ]