Εικόνα σε Div

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από manolism » 09 Ιουν 2006 11:29

Μπορώ να κάνω link μία εικόνα που έχω βάλει σαν background image σε ένα div;

Κι αν ναι πως γίνεται αυτό;

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από chchrist » 09 Ιουν 2006 12:04

Θα μπορούσες να κάνεις κάτι τετοιο.

Κώδικας: Επιλογή όλων

<div>
 <h1>
  <a href="" title="" id="eikona">
   <span class="hidden">Η εικόνα μου</span>
  </a>
 </h1>
</div>
Όπου

Κώδικας: Επιλογή όλων

#eikona &#123;
width&#58;;
height&#58;;
background&#58;url&#40;path/gia/tin/eikona/sou&#41; no-repeat;
float&#58;left;//προαιρετικο.
&#125;

.hidden &#123;
display&#58;none;
&#125;
Βασικά το div με αυτο τον τρόπο δεν χρεάζετε αλλά αν παίζει κάποιο ρόλο laypout στην σελίδα σου κράτα το.

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από chchrist » 09 Ιουν 2006 12:14

Α! ξέχασα το <h1> έχει default κάποιο margin και padding οπότε καλό θα ήτανε να τα βγάλεις με ένα

h1 {
margin:0;
padding:0;
}

ή καλυτερα να δώσεις ένα id στο div σου px imgholder

έτσι ώστε

#imgholder h1 {
margin:0;
padding:0;
}

για να μην επηρεαστούν τα άλλα heading σου

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από ThyClub » 09 Ιουν 2006 12:43

Με JS αν γινόταν θα ήταν πολύ έξυπνο ;)

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από manolism » 09 Ιουν 2006 12:54

Τι είναι αυτό;

Γρίφος για να ψάξω να το βρω;

:lol: :lol: :lol: :lol: :lol:

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από cherouvim » 09 Ιουν 2006 13:08

I div eikona den einai link, opote prepei na eisageis kapou ena link. Mporeis to idio to link na to kaneis eikona.

Κώδικας: Επιλογή όλων

<a id='foo' href='bar'>accessible link text</a>

Κώδικας: Επιλογή όλων

#foo &#123;
width&#58; 100px;
height&#58; 100px;
text-indent&#58; -5000px; /* diohnei to text */
background&#58; #ARHIKO_HROMA url&#40;image/path&#41;;
border&#58; 0;
display&#58; block;
&#125;
live demo @ http://temp.cherouvim.com/forums/imagelink/

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από chchrist » 09 Ιουν 2006 13:22

Lunarmedia πες μου τι δεν κατάλαβες. Δεν είναι τόσο τραγικό. Κάνεις ένα <hn> όπου n ο αριθμός του heading
και βάζεις μέσα ένα text. Λογικά δεν θες να φαίνεται αυτό το text οπότε το κρύβεις βαζοντάς το μέσα σε ένα span με μια class="hidden". Το text αυτό το κάνεις link και στο <a> δίνεις ένα id πχ eikona στο οποιο βάζεις ως background την εικόνα σου και τις διαστάσεις της.

ThyClub με js γίνεται και μάλιστα καλύτερα να το κάνεις με DOM scripting αλλά γιατί να χρησιμοποιήσεις javascript για κάτι τέτοιο;

Πιστεύω πως ο τρόπος που λέω είναι καλύτερος δεδομένου οτι αν κάποιος δει χωρίς styles το site σου δεν θα δει την εικόνα αλλά το text με hyperlink (πχ screenreaders,searchbots).

Σίγουρα θα υπάρχει και καλύτερος τρόπος...

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από chchrist » 09 Ιουν 2006 13:24

Cherouvim η phark method δεν είναι αυτή; Lunarmedia μπορείς και με αυτή που είπε ο cherouvim. Είναι δοκιμασμένη.

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από ThyClub » 09 Ιουν 2006 13:26

Νομίζω ότι ο lunar θέλει να κάνει λίνκ στην εικόνα που έχει βάλει για background και όχι να βάλει ένα background στο λίνκ.

Άρα με javascript θα μπορούσε να κάνει parse το url της εικόνας και να το χρησιμοποιήσει σαν href στο λίνκ του.

:D:D:D Εκτός και αν έχω βγεί κανα 2-3 χιλιόμετρα off-topic :P

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από chchrist » 09 Ιουν 2006 13:29

Μα δεν μπορείς να βάλεις ένα div μέσα σε <a>

Δεν γίνεται αυτο <a href="" title=""><div></div></a>

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από ThyClub » 09 Ιουν 2006 13:36

Εγώ δεν είπα να βάλεις λίνκ στο div. Ο κώδικας θα είναι κάπως έτσι:

Κώδικας: Επιλογή όλων

<div>
<a href="" id="changeMe">Eikona</a>
</div>
Και με javascript να αλλάζεις το href. Βέβαια το path της εικόνας θα πρέπει να είναι γνωστό.

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από chchrist » 09 Ιουν 2006 13:39

Ναι αλλά απο την στιγμή που έχει ως css background το image και όχι σαν <img src="" alt="" /> δεν γίνεται.

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από ThyClub » 09 Ιουν 2006 14:09

ThyClub έγραψε:Βέβαια το path της εικόνας θα πρέπει να είναι γνωστό.
Μπορεί να περάσει το javascript μέσα απο το αρχείο CSS. Αρχίσαμε να ξεφεύγουμε λίγο :P

Άβαταρ μέλους
milianos
Δημοσιεύσεις: 269
Εγγραφή: 11 Νοέμ 2004 01:39
Τοποθεσία: schwabenland
Επικοινωνία:

Εικόνα σε Div

Δημοσίευση από milianos » 09 Ιουν 2006 15:55

Κατευθείαν ενα div bg δεν μπορείς να το κάνεις σύνδεσμο. Μπορείς όμως ολόκληρο το div μαζί με το background με ενα μικρό script οπως λέει και ο ThyClub.

παράδειγμα

Κώδικας: Επιλογή όλων

<html>

<head>
<title>Εκτροπή απο Div</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-7">
<script language="JavaScript">
<!--
function goToURL&#40;url&#41; &#123;//v1.0
 window.location=url;
&#125;
// -->
</script>
</head>

<body>

<div style="background-image&#58;url&#40;'divc.jpg'&#41;; width&#58;120px; height&#58;90px; position&#58;absolute; left&#58;187px; top&#58;348px; z-index&#58;1" onclick="goToURL&#40;/*href*/'http&#58;//www.lunarmedia.gr'&#41;">
</div>

</body>

</html>
onclick
onmouseover
onmousemove

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Εικόνα σε Div

Δημοσίευση από skeftomilos » 10 Ιουν 2006 01:32

Προτιμώ τη λύση που προτείνει ο Cherouvim γιατί είναι απλή και ασφαλής. Με JavaScript πάμε γυρεύοντας για προβλήματα. Π.χ. η λύση που προτείνει ο Milianos δημιουργεί αόρατα links, μη προσβάσιμα χωρίς pointing device, για τους χρήστες χωρίς JavaScript, και για τις search engines.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες