Fixed plaatje aanklikbaar

Door Piet Marisael op 29-08-2010 15:08 gewijzigd op 29-08-2010 15:11

2.779 views

Hoe los ik dit op:

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:


 body { 
  background-image: url(/framework/data/magazine/nummers/62/LocatieLogo/logo.jpg); 
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center
  }

Jelmer -

29-08-2010 18:56

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.

Piet Marisael

29-08-2010 20:19

Het werkt toch niet zoals ik zou willen, de gehele pagina is nu aanklikbaar naar een pagina geworden.
De andere links werken niet meer.

Vincent Huisman

29-08-2010 21:18

heb je je div/href wel afgesloten?

Piet Marisael

04-09-2010 20:15 gewijzigd op 04-09-2010 20:39

Volgens de code die ik gevonden had wel, zie post 29/08/2010 18:28:59
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:


#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;

}

In de pagina staat het volgende:


<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.

Reageren

Inloggen om te reageren