ugrás a tartalomhoz

Kép helyezése térképre

makezdtem · 2011. Ápr. 12. (K), 20.45
Az miért van hogy rá akarok tenni egy másik kis képet a térképemre, ami menü lenne és ugye a rendezést absolute ra rakom, így egyből átbassza layerbe és felbassza a sarokba a képet miután elmentem!
Hogy csináljam meg hogy a kép ott legyen a másik képen ahova teszem!???
‹ Form submit cancel Hozzászólás saját oldalon tárolva ›
 ■
1

Hmm?

Blintux · 2011. Ápr. 12. (K), 22.40
Szerintem kevesen érik mi is a gondod pontosan, én sem vágom igazán.
Ha felteszel egy kérdést, próbáld meg úgy elolvasni mint egy külső szemlélő, aki abszolút nem tudja mit szeretnél csinálni. Ha megérted, akkor jó a kérdés, ha nem, akkor még csiszolj rajta :)

Én most arra tippelek, hogy CSS-el szeretnél egy képre, egy másik képet tenni, amit be akarsz pozicionálni egy bizonyos koordinátára.
Nos, ehhez kell két DIV. Egyik háttere a nagy kép és a pozíciója relative.
A kis kép DIV-je bent van a nagy kép DIV-jében és a pozíciója absolute.
A kis képet ezután a top, left, bottom, right opciókkal tudod ide-oda pozicionálni a nagy kép DIV-jében.
2

Igen

makezdtem · 2011. Ápr. 12. (K), 22.57
Igen kérem erre gondoltam!
De le tudnál nekem írni kódokba egy ilyet? Légy oly szíves! :)
3

Íme

Blintux · 2011. Ápr. 12. (K), 23.53
  1. .nagy {  
  2.     position:relative;  
  3.     width:400px;  
  4.     height:300px;  
  5.     background-color:#ff0000;  
  6. }  
  7.   
  8. .kicsi {  
  9.     position:absolute;  
  10.     width:30px;  
  11.     height:30px;  
  12.     top:80px;  
  13.     left:100px;  
  14.     background-color:#0000ff;  
  15. }  
  1. <div class="nagy">  
  2.     <div class="kicsi"></div>  
  3. </div>  
Értelem szerűen a background-color helyet background-image-t használsz ha képet szeretnél háttérnek.
4

működik

makezdtem · 2011. Ápr. 13. (Sze), 17.46
Működik de mikor még egy másik képet is be akarok rakni a nagy képre azt már nem jeleníti meg miért?
Kell még valamit csinálni? :S
5

Részletezd

Poetro · 2011. Ápr. 13. (Sze), 18.15
Mit jelent, hogy nem jeleníti meg? Nem lehet hogy az egyik kép eltakarja a másikat, és ezért csak nem látszik? Vagy hibás elérési utat adsz meg a képre? Vagy nem is ott van a kép, ahol számítasz rá?
6

Példa

Blintux · 2011. Ápr. 13. (Sze), 18.24
A második képnek is kell egy azonosító. Ha ugyanazt adod neki, mint az elsőnek, akkor egymásra kerülnek.

Példa két kis képre:
  1. .nagy {    
  2.     position:relative;    
  3.     width:400px;    
  4.     height:300px;    
  5.     background-color:#ff0000;    
  6. }  
  7.   
  8. .kicsi_1,  
  9. .kicsi_2 {  
  10.     position:absolute;    
  11.     width:30px;    
  12.     height:30px;    
  13. }  
  14.   
  15. .kicsi_1 {    
  16.     top:80px;    
  17.     left:100px;    
  18.     background-color:#0000ff;    
  19. }  
  20.   
  21. .kicsi_2 {    
  22.     top:140px;    
  23.     left:180px;    
  24.     background-color:#00ff00;    
  25. }  
  1. <div class="nagy">    
  2.     <div class="kicsi_1"></div>  
  3.     <div class="kicsi_2"></div>  
  4. </div>  
Mint látod, a közös értékeket célszerű összevonni, ezzel is segítve a gyorsabb letöltést.
7

Nagyon szépen köszönöm!

makezdtem · 2011. Ápr. 13. (Sze), 19.55
Nagyon szépen köszönöm a segítséged!
Még azt szeretném megkérdezni, hogy ha én még beleakarok vinni egy olyat, hogy a két kis kép nagyobb legyen ha ráviszem az egeret!
Akkor azt hogy egészítsem ki?

Alapjáraton erre gondolok!
  1. <a href="home.html"  
  2.     onmouseover="document.images[0].src='home2.gif';"  
  3.     onmouseout="document.images[0].src='home1.gif';">  
  4.     <image border="0" src="home1.gif">  
  5. </a>  
Ezt kellene a másikkal egybe tenni!
Próbáltam átírni de ezután eltűnt a nagy képem és a kis képem amit eddig leírtál nekem és az új kép ami bejött a régi helyett felugrott a sarokba! :D
Remélem érthető :S
Köszönöm fáradozásotokat!
8

Link

Blintux · 2011. Ápr. 13. (Sze), 21.15
Ebben az esetben a legegyszerűbb megoldás ha az <a> tegeknek adsz háttérképet, ami rámutatáskor cserélődik.

Példa:
  1. .nagy {  
  2.     position:relative;  
  3.     width:400px;  
  4.     height:300px;  
  5.     background-color:#ff0000;  
  6. }  
  7.       
  8. a.kicsi_1 {  
  9.     display:block;  
  10.     position:absolute;  
  11.     width:30px;  
  12.     height:30px;  
  13.     top:80px;  
  14.     left:100px;  
  15.     background-color:#0000ff;  
  16. }  
  17.   
  18. a.kicsi_1:hover {  
  19.     width:50px;  
  20.     height:50px;  
  21.     background-color:#0f0f0f;  
  22. }  
  1. <div class="nagy">  
  2.     <a href="#" class="kicsi_1"></a>  
  3. </div>  
DIV-ekre is lehet alkalmazni a hover-t, de az IExplorerek régi verziói ezt nem szeretik.
9

értem

makezdtem · 2011. Ápr. 13. (Sze), 22.25
meglesem ezt a verziót holnap aztán írok ha nem értek valamit köszi szépen!