WN - Image-map eller länk-div?

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Image-map eller länk-div? (https://www.wn.se/forum/showthread.php?t=1043075)

StefanW

2010-07-27 16:37

Image-map eller länk-div?

Det är väl möjligt att göra en div till en länk eller har jag helt fel? Jag har för mig att jag gjort detta innan i alla fall. Är den lösningen smartare eller dummare än att göra en "image-map"?

Det gäller EN länk i en header. Loggan för att komma tillbaka till startsidan. Kan man sätta en div som matchar runt loggan som länkar till index eller ska jag göra en image-map?

Mvh

ooskar

2010-07-27 16:46

Består loggan av en bild? Isåfall är det ju bara att göra den till en länk. är det text, sätt en class och padding på den så utökas det klickbara området.

edit: ingen lösning är ju egentligen fel, men just imagemap i det här läget känns fel, då är det nog bättre med en div alt. några av de sakerna jag sa.

StefanW

2010-07-27 16:57

Headern är en stor bild. En liten del av headern består av loggan.

rhdf	2010-07-27 18:15

om du har nånting i stil med detta

Kod:

<div id="header">

<h1><a href="/">Sidans titel</h1>

</div>

så kan du lösa det med lite krativ css

Kod:

#header{

   background:#fff url(bakgrundsbilden) no-repeat;

   width:960px;

   height:150px;

   position:relative;

}

#header h1{

   position:absolute;

   top:Y  /*ersätt med valfritt värde som passar */

   left:X /*ersätt med valfritt värde som passar */

   width:350px /*hur BRED loggan är */

   height:50px /*hur HÖG loggan är */

  

   border: solid 1px red; /*för att underlätta när du klurar ut X och Y */

 }



#header h1 a{

   display: block

   text-indent:-9999px;

   height:50px;

   line-height:50px;

}

ooskar

2010-07-27 18:39

Citat:

Ursprungligen postat av _blackened_ (Inlägg 20363648)

Headern är en stor bild. En liten del av headern består av loggan.

Jag har ingen direkt koll på hur pass omodernt image maps är nuförtiden, om det håller på att försvinna från standarder eller inte.

Om du inte vill ha det kan du ju stycka upp header-bilden i små delar och bara göra den delen du vill ha klickbar.

kw_wasabi

2010-07-28 14:33

Jag gör såhär:

HTML

Citat:

CSS

Citat:

.title a {
display: block;
height: 100%;
width: 65%;
}

Sedan kan du ju trixa lite med position m.m. för att få det klickbara området att hamna precis där du vill.

Alla tider är GMT +2. Klockan är nu 12:16.