Jump to content
GSForum - Segélyvonal

Kattintható kép

vmiki

By vmiki
in HTML

 Share

Recommended Posts

vmiki    0

vmiki
Posted

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

Link to comment
Share on other sites

Kovács Gyula (MiniDisk)    0

Kovács Gyula (MiniDisk)
Posted

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

Link to comment
Share on other sites

vmiki    0

vmiki
  • Author
Posted

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

Link to comment
Share on other sites

Kovács Gyula (MiniDisk)    0

Kovács Gyula (MiniDisk)
Posted

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.

Link to comment
Share on other sites

vmiki    0

vmiki
  • Author
Posted

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!

Link to comment
Share on other sites

Kovács Gyula (MiniDisk)    0

Kovács Gyula (MiniDisk)
Posted

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>

Link to comment
Share on other sites

Kovács Gyula (MiniDisk)    0

Kovács Gyula (MiniDisk)
Posted

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.

Link to comment
Share on other sites

vmiki    0

vmiki
  • Author
Posted

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

Link to comment
Share on other sites

Kovács Gyula (MiniDisk)    0

Kovács Gyula (MiniDisk)
Posted

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

Link to comment
Share on other sites

Bencce    0

Bencce
Posted

De még egyszerûbb Dreamweaverrel bemappelni :)

Link to comment
Share on other sites

Kovács Gyula (MiniDisk)    0

Kovács Gyula (MiniDisk)
Posted

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

Link to comment
Share on other sites

Bencce    0

Bencce
Posted

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.

Link to comment
Share on other sites

Kovács Gyula (MiniDisk)    0

Kovács Gyula (MiniDisk)
Posted

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:

Link to comment
Share on other sites

vmiki    0

vmiki
  • Author
Posted

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

Link to comment
Share on other sites

Kovács Gyula (MiniDisk)    0

Kovács Gyula (MiniDisk)
Posted

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.

Link to comment
Share on other sites

vmiki    0

vmiki
  • Author
Posted

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>

Link to comment
Share on other sites

payskin    876

payskin
Posted

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

Link to comment
Share on other sites

Kovács Gyula (MiniDisk)    0

Kovács Gyula (MiniDisk)
Posted

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.

Link to comment
Share on other sites

vmiki    0

vmiki
  • Author
Posted

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...