Hypelink σε background εικονα ?

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

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

Απάντηση
infosyst1
Δημοσιεύσεις: 45
Εγγραφή: 11 Ιουν 2003 13:43

Hypelink σε background εικονα ?

Δημοσίευση από infosyst1 » 13 Μάιος 2012 16:18

Hypelink σε background εικονα που εχω βαλει σε μια html σελιδα μου με το Dreamweaver η και με το frontpage αν γινετε πιο ευκολα.

Εχω δοκιμασει και με τα 2 . Στο μεν frontpage γινετε αμεσως απο τις ιδιοτητες σελιδας, αλλα το `χερακι` παιζει σε ολη την σελιδα ! και οχι μονο στην back εικονα που θελω.

Στο μεν dreamweaver ενω βαζω hyperlink αφου εχω βαλει μια εικονα background δεν το δεχετε.

Μηπως μπορει καποιος να μου δωσει λυση?

Ευχαριστω πολυ

Κωνσταντινος

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Hypelink σε background εικονα ?

Δημοσίευση από alou » 14 Μάιος 2012 15:40

Φτιάξε μια μικρή εικόνα με διαφάνεια (png ή gif) και βάλε την σε absolute positioned container με διαστάσεις 100% αμέσως μετά το body - όχι σαν φόντο, με img tag για να βάλεις και το link κανονικά.

Δηλαδή

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

<body>
<div id="bglink"><a href="to link sou"><img src="i eikona sou" /></a></div>

και στο css :

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

#bglink &#123;width&#58;100%;height&#58;100%;position&#58;absolute;z-index&#58;1&#125;
#bglink img &#123;width&#58;100%;height&#58;100%&#125;
Για να μην είναι η εικόνα όμως πάνω από το περιεχόμενό σου (δεν θα πατιέται κανένα link), στο container που είναι το περιέχει θα δηλώσεις relative postition και μεγαλύτερο z-index.

Αυτός είναι ο πιο απλός τρόπος, νομίζω.

infosyst1
Δημοσιεύσεις: 45
Εγγραφή: 11 Ιουν 2003 13:43

Hypelink σε background εικονα ?

Δημοσίευση από infosyst1 » 15 Μάιος 2012 12:29

Δυστυχως δεν δουλευει ετσι, γιατι ειναι html σελιδα ενος πελατη μου και εγω βασικα το ξερω σε joompla μονο.
Αν εχει καμια αλλη ιδεα με καποιον απλα κωδικα πρεπει να γινετε οπως βλεπω και πχ στο apn.gr. Κατι τετοιο ψαχνω

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Hypelink σε background εικονα ?

Δημοσίευση από apsuh0s » 15 Μάιος 2012 13:41

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wrapper &#123; 
	width&#58; 1200px; /* = platos eikonas pou periseuei deksia kai aristera + platos #content diladi 120+960+120=1200px Ayto na simpiptei me to platos tis eikonas */
	margin&#58; 0 auto; /* to kedrareis */
	position&#58; relative;
	&#125;
.ad &#123;
	position&#58; fixed; /* An thes na menei i eikona se statheri thesi otan ginetai vertical scrolling. Eidallos position&#58; absolute; */
	&#125; 
#content &#123;
	position&#58; absolute;
	width&#58; 960px; /* platos tou container pou periexei to site sou */
	left&#58; 120px; /* &#40;platos wrapper - platos content&#41; / 2 diladi &#40;1200-960&#41;/2=120 etsi oste na kedrarei */
	height&#58; 2000px; /* to evala gia na prospoiitho periexomeno */
	background&#58; #ccc;
	&#125;
</style>
</head>
<body>

<div id="wrapper">

	<a href="#" class="ad">
		<img src="image-diafimisis.jpg" height="800" width="1200"> <!-- eikona diafimisis me diastaseis 1200*800 -->
	</a>
	
	<div id="content"><!-- to container pou periexei to site sou -->
		website
	</div><!-- #content -->
	
</div><!-- #wrapper -->

</body>
</html>
Δες αν σε βολεύει κάτι τέτοιο.

edit: άκυρο. Τώρα είδα πως το θέλεις σαν το apn. Το παραπάνω δεν συμπεριφέρεται με αυτόν τον τρόπο.
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Hypelink σε background εικονα ?

Δημοσίευση από apsuh0s » 15 Μάιος 2012 14:35

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body &#123;
	margin&#58; 0;
	padding&#58; 0;
&#125;
.ad-container &#123;
	background&#58; url&#40;image.jpg&#41; no-repeat 50% 0;
	height&#58; 800px; /* to height tis eikonas */
	position&#58; fixed; /* allios position&#58; absolute; */
	width&#58; 100%;
	top&#58; 50px;/* analogos an exeis kapoio header h nav */
&#125;
.ad &#123;
	position&#58; absolute;
	width&#58; 100%;
	height&#58; 800px;
	margin&#58; 0 auto;
&#125;
#wrapper &#123;
	width&#58; 960px; /* eksartatai apo to site sou */
	margin&#58; 0 auto;
	position&#58; relative;
&#125;
#content &#123;
	height&#58; 2000px;
	background&#58; #ddd;
	z-index&#58; 10;
	width&#58; 100%;
	position&#58; absolute;
&#125;
</style>
</head>
<body>

<div class="ad-container"><a href="#" class="ad"></a></div>
	
<div id="wrapper"><!-- container tou site sou -->
	<div id="content">
		website content
	</div>
</div><!-- wrapper -->

</body>
</html>
Για δες αυτό αν σε βολεύει. Δε μου αρέσει αλλά αν σε ικανοποιεί χρησιμοποίησε το!
.ninja { color: black; visibility: hidden !important; }

infosyst1
Δημοσιεύσεις: 45
Εγγραφή: 11 Ιουν 2003 13:43

Hypelink σε background εικονα ?

Δημοσίευση από infosyst1 » 15 Μάιος 2012 15:51

Ναι σε ευχαριστω, κατι τετοιο ψαχνω, το δοκιμασα αλλα η back εικονα αντι να πεφτει απο κατω ειναι πανω απο την html σελιδα. Καποα παραμετρο ?

Κ.

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Hypelink σε background εικονα ?

Δημοσίευση από apsuh0s » 15 Μάιος 2012 16:07

Αν δοκιμασεις των παραπανω κωδικα αυτουσιο και βαλεις στην καταλληλη θεση το δικο σου image.png τοτε θα δεις πως λειτουργει οπως το θελεις. Για τα υπολοιπα μονο υποθεσεις μπορω να κανω. Ειδες τη λογικη που εχει ο κωδικας. Προσπαθησε να τον προσαρμοσεις.
.ninja { color: black; visibility: hidden !important; }

infosyst1
Δημοσιεύσεις: 45
Εγγραφή: 11 Ιουν 2003 13:43

Hypelink σε background εικονα ?

Δημοσίευση από infosyst1 » 15 Μάιος 2012 20:44

OK Ευχαριστω πολυ!

kostas-theod
Δημοσιεύσεις: 222
Εγγραφή: 11 Ιαν 2004 09:15
Τοποθεσία: Πάτρα-ΕΛΛΑΔΑ

Hypelink σε background εικονα ?

Δημοσίευση από kostas-theod » 19 Σεπ 2012 01:43

Και εγώ οταν εισάγω τον κώδικα βλέπω την Background εικόνα πάνω από το υπόλοιπο site.

Μήπως θα μπορούσες να δώσεις μια βοήθεια.

Ευχαριστώ

kostas-theod
Δημοσιεύσεις: 222
Εγγραφή: 11 Ιαν 2004 09:15
Τοποθεσία: Πάτρα-ΕΛΛΑΔΑ

Hypelink σε background εικονα ?

Δημοσίευση από kostas-theod » 19 Σεπ 2012 02:39

Βρέθηκε η λύση :

στο html εισαγω :
<div class="ad-container"><a href="http://www.domain.gr/" class="ad"></a></div>
<div id="wrapper"><!-- container tou site sou -->
και στο css
}
#wrapper {
width: 980px; /* eksartatai apo to site sou */
margin: 0 auto;
position: relative;
}
.ad-container {
background: url(image.png) no-repeat 50% 0;
height: 1000px; /* to height tis eikonas */
position: fixed; /* allios position: absolute; */
width: 100%;
top: 0px;/* analogos an exeis kapoio header h nav */
}
.ad {
position: absolute;
width: 100%;
height: 1000px;
margin: 0 auto;
}

Σας ευχαριστώ όλους

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

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

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