Kattintható kép

August 16, 2006

Hogy lehet olyat csinálni, hogy a kép egy bizonyos része kattintható legyen?

Úgy, mint az idõkep.hu-n a hötérképen lehet Budapest és Balaton-nál

August 16, 2006

Csinálsz egy divet, ennek a képet teszed be háttérnek.

Ebbe a divebe teszel annyi divet, ahány kattintó linket szeretnél. Ezen divek mérete lesz a kattintási terület. Az elhelyezését a margin beállítással tudod megoldani. Hogy ténylegesen is működjön, a html-be a divhez be kell linkelni egy átlátszó gif-et, ez lesz a link.

IPB kép

August 16, 2006

Huhh, ez egy picit magas, de próbálkozok

August 16, 2006

css kell hozzá.

Vegyünk egy divet, ez lesz a hátteres.

html-be:

<div id="alap"></div>

css:

#alap {
width: 300px;
height: 150px;
background: url(kep01.jpg) no-repeat;
border: 0;
margin: 0;
padding: 0;

Nézzük a belső diveket:

Ezeket az elöbb írt diven belülre kell helyezni, legyen most két darab ilyen linkelhető része a képnek:

A html a következőképpen módosul:

<div id="alap">
  <div id="keplinkdoboz01"><a href="http://www.valami.hu" target="_blank"><img class="linkkepe" src="atlatszogif.gif" alt="" /></a></div>
  <div id="keplinkdoboz02"><a href="http://www.valami.hu" target="_blank"><img class="linkkepe" src="atlatszogif.gif" alt="" /></a></div>
</div>

A hozzátartozó css így változik:

#alap {
width: 300px;
height: 150px;
background: url(kep01.jpg) no-repeat;
border: 0;
margin: 0;
padding: 0;

#keplinkdoboz01, keplinkdoboz02 {
border: 0;
padding: 0;
width: 50px;
height: 50px;
position: absolute;
}

#keplinkdoboz01 {
z-index: 1;
margin: 25px 0 0 25px;
}

#keplinkdoboz02 {
z-index: 2;
margin: 75px 0 0 75px;
}

.linkkepe {
border: 0;
margin: 0;
width: 50px;
height: 50px;
}

Körülbelül így. A keplinkdoboz marginjaival lehet beállítani a linkek pozícióját, a width, és height pedig a méretét adja. Akkora átlátszó gifet csinálj, mint ezen divek mérete. A méretet ne felejtsd beállítani a .linkkepe-nél is. Ha a #keplinkdoboz01, keplinkdoboz02-höz a border: 0; helyett átmenetileg beírod hogy border: 1px solid #000; akkor lesz egy fekete kerete is, ami azért jó, mert a pozícionálást segíti. Ha jó helyen vannak, visszaírhatod border: 0;-ra.

August 18, 2006

Még vannak vele prolémáim:

a CSS ezt tartalmazza:

#alap {
width: 385px;
height: 384px;
background: url(kep.jpg) no-repeat;
border: 0;
margin: 0;
padding: 0;

#keplinkdoboz01, keplinkdoboz02 {
border: 0;
padding: 0;
width: 30px;
height: 30px;
position: absolute;
}

#keplinkdoboz01 {
z-index: 1;
margin: 20px 0 0 20px;
}

#keplinkdoboz02 {
z-index: 2;
margin: 310px 0 0 230px;
}

.linkkepe {
border: 1px solid #000;
margin: 0;
width: 30px;
height: 30px;
}

Itt egy link, hogy milyen lett: Link

Az IE-ben hiába van beállítva, hogy mekkor a képméret,

#alap {

width: 385px;

height: 384px;

mégis összeugrik, a szélsõ kis gif-hez igazodnak a kép szélei.

Firefoxban pedig a kép megjelenik rendesen, de a kattintó gif-ek kinnmaradnak a kép szélén, nem mennek beljebb.

Lehet, hogy most ostobaságot kérdek, de a "margin: 20px 0 0 20px;" -ban a két középsõ 0 mit jelent?

És a z-index?

Köszi a segítséget!

August 18, 2006

A z-index csinálja azt, hogy a divek akár egymás felett is elmozdulhassanak. Tehát nem veszik figyelembe a html-ben lévõ sorrendet.

A 20 px 0 0 20px az akár így is kinézhetne: 20px 0px 0px 20px, de ha az érték nulla, nem muszáj px-et írni mögé. Egyébként így kell értelmezni: top - right - bottom - left. (Fent - Jobbra - Lent - Balra)

Az ok, hogy úgy igazodik, az az, hogy nincs dokumentumtipus megadva. css alkalamzásánál kötelezõ! Ezenkívül a css sincs jól meghívva!

Tehát:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="hu" />
<title>Weblapom neve</title>
<link href="kinezet.css" type="text/css" rel="stylesheet" />
<meta name="author" content="vmiki" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
</head>

August 18, 2006

Még annyit, hogyha az IE-ben nem látszik a kép, akkor a kép elérési útja nem jó a html-ben.

August 18, 2006

Az IE-ben látszik a kép, de csak annyi része, ami a kis gif széle határol,a gif-en túli rész fehér volt.

Most már ugyan úgy jelenik meg mint Firefoxban, de a kis gifek még mindig kinn maradnak a szélen.

August 18, 2006

#keplinkdoboz01, keplinkdoboz02 {

Ezt a sort úgy módosítsd a css-ben, hogy a keplinkdoboz02 elé is tegyél egy #-et, tehát ilyen legyen a sor: #keplinkdoboz01, #keplinkdoboz02 {

Bocsi, ezt én rontottam. :upsz: :upsz: :upsz:

A másik, hogy én ezt még sosem alkalmaztam önálló divben, hanem úgy, hogy volt egy fő div, és ebben a hátteres div, és benne a kattintó képek.

Tehát az egész html úgy módosulna, hogy:

<div id="main">
  <div id="alap">
    <div id="keplinkdoboz01"><a href="http://www.pcworld.hu" target="_blank"><img class="linkkepe" src="atlatszo.gif" alt="" /></a></div>
    <div id="keplinkdoboz02"><a href="http://www.minidiscweb.hu" target="_blank"><img class="linkkepe" src="atlatszo.gif" alt="" /></a></div>
  </div>
</div>

A css-ben pedig az egész elejére jönne egy ilyen:

#main {
margin: auto;
padding: 0;
border: 0;
width: 880px;
}

Ennek így már működnie KELL!

August 18, 2006

De még egyszerûbb Dreamweaverrel bemappelni

August 18, 2006

Na igen, persze. De minek ehhez egy hatalmas program? Egyáltalán nem egyszerübb. Egyébként ha annyira egyszerû, ajánlom Dreamvearverben magalkotni a game.minidiscweb.hu oldalam. Kiváncsi vagyok, sikerülne-e? (Mielött elkezdenéd: NEM fog összejönni )

August 18, 2006

Hát a linkromázáson kívül amit gondolom CSS-sel meg lehet oldani, azon kívül mit nem lehet DW-ben csinálni? Én annyira nem értek hozzá csak egyszerûbb dolgokat hozok össze, meg csomó mindent Tõled kérdezek meg MSN-en, de annyira nem tûnik lehetetlennek.

August 18, 2006

Tényleg nem mûködik. De rá fogok jönni, mi az oka. Egyszerüen nem veszi figyelembe a divre kiadott css beállítást, de hogy miért nem .... ? :hááát: :hmm:

August 18, 2006

Sajnos. Az utolsó ötleteidet is beletettem, de még mindig nem jön össze.

August 18, 2006

Sajnos én hibáztam. Olyannyira, hogy most egy apróbb módosítást végeztem a honlapom kezdőlapján, és 1.5 órámba került. Azt hiszem, gyakorolnom kell megint.

August 19, 2006

MiniDisc! Közben próbálgattam én is, hátha sikerül valami, megnézegettem az idõkép.hu forráskódját és ezt találtam. És mûködik!!! Viszont van még vele problámám. a href= rész csak relatív hivatkozást vesz. És még egy, a kordináták ugye a terület bal felsõ, majd a jobb alsó sarkának koordinátáit adja meg?

 
<p class='udv'>
    <img name='kep' alt='Kattintható kép' title='Háttérkép' src='kep.jpg' width='385' height='384' usemap='#kep' border='1'>
    <map name='kep'>
    <area shape='rect' coords='170,100,190,115' 'href=www.pcworld.hu' alt='PC World Onlinek'>
    <area shape='rect' coords='144,120,30,50' 'href=www.minidiscweb.eu' alt='MiniDisc oldala'>
    </map>        
</p>

August 20, 2006

Ja, épp javasolni akartam, hogy CSS és DIV-ek helyett használjuk a HTML megoldását erre, úgy hívják image map.

August 20, 2006

De ennek menie kell css-sel is simán ... :hááát: Csak én bénázok most. Nem tudom, miért nem működik, hiszen már ugyanígy működik más lapjaimon is.

August 20, 2006

De azért köszi szépen!!! De azért még lenne gondom ezzel is. A fenti kódban a href= rész csak relatív hivatkozást vesz. Ez miért van?

Sign In

Kattintható kép

Recommended Posts

vmiki

Kovács Gyula (MiniDisk)

vmiki

Kovács Gyula (MiniDisk)

vmiki

Kovács Gyula (MiniDisk)

Kovács Gyula (MiniDisk)

vmiki

Kovács Gyula (MiniDisk)

Bencce

Kovács Gyula (MiniDisk)

Bencce

Kovács Gyula (MiniDisk)

vmiki

Kovács Gyula (MiniDisk)

vmiki

payskin

Kovács Gyula (MiniDisk)

vmiki

Create an account or sign in to comment

Create an account

Sign in

Browse