Fixed plaatje aanklikbaar
ik wil een plaatje in een <table> plaatsen, dat plaatje moet fixed op de pagina staan (mee scrollen met de pagina).
En tevens moet het plaatje aanklikbaar zijn om door te verwijzen naar een andere pagina.
Ben al eventjes aan het zoeken geweest maar nog geen succes gevonden.
Weet iemand raad?
Deze code is wat ik vind, maar daar is het nog niet aanklikbaar:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
body {
background-image: url(/framework/data/magazine/nummers/62/LocatieLogo/logo.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center
}
background-image: url(/framework/data/magazine/nummers/62/LocatieLogo/logo.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center
}
Gewijzigd op 29/08/2010 15:11:53 door Piet Marisael
Ik zou graag het plaatje op de voorgrond hebben zodat het aanklikbaar is.
Maar laat ik et nou anders stellen:
Hoe kan ik in de CSS dat plaatje aanklikbaar maken zonder dat de gehele pagina aanklikbaar wordt?
Dat is wat ik eigenlijk bedoel.
Code (php)
1
#test { position: fixed; width: 100%; top: 120px; bottom: 20px; left: 280px; overflow:hidden; background: url(plaatje.gif) no-repeat bottom ;}
In de php heb ik:
Code (php)
1
2
2
<div id="test">
</div>
</div>
Tot zover gaat het goed, maar hoe maak ik die link?
Met:
Code (php)
1
2
3
4
2
3
4
<a href="pagina.php">
<div id="test">
</div>
</a>
<div id="test">
</div>
</a>
Alleen plaatje.gif moet aanklikbaar zijn.
Gewijzigd op 29/08/2010 18:05:33 door Piet Marisael
bedankt voor de tip, ik zat gewoon op de verkeerde woorden te zoeken.
wat ik nodig heb is dus dit
Code (php)
1
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
ja nu je het zegt, helemaal niet aan gedacht.
Ik ga het direkt uitproberen.
De andere links werken niet meer.
Als ik in de CSS een border laat maken om het gebied te zien, staat die border over bijna de gehele pagina terwijl het plaatje wel op de goede plaats staat.
Ik moet dus dat gebied op de een of andere manier kleiner maken.
Dat is me ondertussen ook gelukt.
Op mijn scherm staat het perfect en is het hoe ik het zou willen hebben.
Behalve op een andere scherm-resolutie.
Dan zijn de verhoudingen zoek en klopt de uitlijning weer niet.
In de CSS heb ik nu staan:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#test { position: fixed; width: 8%; top: 365px; bottom: 20px; left: 925px; overflow:hidden; background: url(http://www.URL.nl/plaatje.gif) no-repeat bottom ;
border-style: solid;
border-color: #008ee0;
border-width: 2px;
}
border-style: solid;
border-color: #008ee0;
border-width: 2px;
}
In de pagina staat het volgende:
Code (php)
1
<div id="test" onclick="location.href='http://www.URL.nl/pagina.php';" style="cursor:pointer;"></div>
Is het nu nog zo te maken dat het bij elke scherm-resolutie goed staat?
De px veranderen in % en de getallen aanpassen geeft ook niet het juiste resultaat.
Gewijzigd op 04/09/2010 20:39:57 door Piet Marisael