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.
Het gaat om het principe, dat is gelijk aan elkaar.
http://w3schools.com/css/css_image_transparency.asp
Misschien dat dit helpt?
Misschien dat dit helpt?
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.
je maakt een div, daarin zet je het plaatje met link en die div doe je dan fixed
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:
Tot zover gaat het goed, maar hoe maak ik die link?
Met:
wordt de gehele pagina aanklikbaar en dat is nou net wat ik niet wil
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
ja nu je het zegt, helemaal niet aan gedacht.
Ik ga het direkt uitproberen.
had ik een tijdje geleden ook. toen dacht ik, hé waarom laat ik mijn div niet gewoon linken :)
Of vervang die <div> door een <a>, dan kan je het href-attribuut blijven gebruiken. Dat werkt ook zonder Javascript, en kunnen zoekmachines herkennen. Het maakt voor CSS niet zoveel uit of je nu een <div>-element of een <a>-element zit op te maken. <a>-elementen hebben alleen wat andere standaard-waarden, zoals text-decoration:underline, maar die kan je met CSS allemaal herdefiniëren.
De andere links werken niet meer.
heb je je div/href wel afgesloten?
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