Sette link på bilder

[Nicklas]

Hei !

 

Bare lurte på om noen kunne si meg hvordan jeg får de linkene på DENNE siden til å fungere ? Om det er mulig, eller kansje jeg må dele opp det bildet og gi hvert av bildene en link som den går inn på når jeg trykker på den ?

 

[Lokaltog]

1: du har ikke en eneste link på siden din.

2: ja, du må slice menybildene og lage en <a> rundt alle bildene.

[Nicklas]

Oki, ossen deler jeg opp meny bildet da ? Hvordan blir det når jeg skal sette det inn i meny boksen igjen ?

[Lokaltog]

Ros for at du går for et div/css-basert design!

 

Du åpner bildet med menyen i et bildebehandlingsprogram, bruker et "crop"-verktøy for å klippe ut alle menyvalgene, for senere å legge inn følgende i sourcen din:

<div id="meny">
<a href="home.htm"><img src="home.jpg"></a>
<a href="members.htm"><img src="members.jpg"></a>
[...]
</div>

[Nicklas]

Oki... men når jeg tar å klipper ut av det bildet ... hva skal jeg gjøre med det jeg har klipt ut ? Prøvde å legge det inn i ett nytt dokument men da kom jo bakgrunnen med også

 

Edit .... lol .. fant det ut gitt

Endret 11. juni 2004 av Nicklas

[Nicklas]

Hmm

 

Se på siden nå ... den ble ikke helt vellykka men. Vet dere hva jeg skal gjøre ?

[PoleCat]

img {
border: 0;
}

i cssen...

Endret 11. juni 2004 av PoleCat

[Loomy]

For det første kan du komprimere bildene dine. Akkurat nå er det totalt ~116kB med bilder som attpåtil består av kun to (!) farger. Tør jeg spørre hvilket program de er komprimert i nå? De ser ut til å være voldtatt av komprimering, men størrelsen er allikevel ekstremt stor

 

Menyen må du gjøre noe med. For det første er bildene uleselige, for det andre går den over to linjer og for det tredje får "knappene" en grusom blå ramme rundt seg.

 

Slenger med et par forslag til endringer i CSS-en også. Det som er merket med rødt er endret. Se kommentarene også:

#banner {

background: url('banner.jpg') no-repeat; /* for å unngå at bakgrunnen repeterer seg */

width: 752 px;

height: 122px;

border: 2px solid #000;

}

 

#wrap {

margin: 10px auto 0 auto;

width: 750px;

text-align: left;

}

 

#meny {

width: 752px;

border: 2px solid #000;

padding: 10px;

float: left;

margin: 5px 5px 5px 0;

/* Fjernet height-attributten */

}

 

#meny img {

border:0;

} /* Fjerner stygg blå ramme rundt link-bildene i menyen */

#hoved {

background: url('hoved.jpg') no-repeat;

width: 752px;

height: 500px;

border: 2px solid #000;

padding: 10px;

margin: 5px 5px 5px 0;

}

 

#footer {

background: url('footer.jpg') no-repeat;

width: 752px;

height: 32px;

border: 2px solid #000;

padding: 10px;

margin: 5px 5px 5px 0;

}

[Nicklas]

Oki .. men menyene er fortsatt rare egentlig

 

Jeg har komprimert de i PS elns

[E.T]

Først og fremst:

 

img{

border: 0;

}

[Nicklas]

Ja det har jeg gjort og det funka ikke, noen andre forslag ?

[TorS]

Ja det har jeg gjort og det funka ikke, noen andre forslag ?

Hvis du har gjort det har du ikke lastet opp den oppdaterte fila... Jeg sjekket CSS-fila som lå på siden din, og den hadde ikke:

img {
border: 0;
}

[Nicklas]

Nei det er fordi jeg ikke har publisert den enda

 

Men jeg sjekker jo det på min egen pc oxo .. den var helt lik PUNKTUM !

[N*]

hvis du er lat og ikke gidder å dele opp siden finnes det en funson i fireworks som heter hotspot eller no.. har aldri prøvd det men en kamerat sier det er kjempekjekt!

du kan visstnok åpne bildet i fireworks,markere det stedet du vil ha link og skrive inn plasseringen til siden linken skal føre til. det er noe av det samme i flash og men det er noe vanskligere.

 

ps. jeg aner ikke hvordan dette tar seg ut på nett! (tror ikke det blir veldig vellykket egentlig! ...men enkelt er det nok!

 

kansje det finnes i photoshop og.. ikke vet jeg.