Klikalne tło (z odnośnikiem a href), j.w. Opcje

[phpmax]

Witajcie!

Mam trochę banalny problem i podejrzewam, że rozwiązanie jest też takie. Otóż jak zrobić klikalną tapetę (plik wall.jpg z poniższego kodu) na stronie www jak to ma chociażby Filmweb na swoich reklamach?


Oto mój fragment kodu css:

[HTML] pobierz, plaintext 
body {
	width: 100%;
	background-image: url(http://www.example.com/wall.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	position: relative;
	text-align: center;
	cursor: default;
}
[HTML] pobierz, plaintext 

Z góry dzięki za pomysły (IMG:style_emoticons/default/wink.gif)

Ten post edytował phpmax 18.12.2014, 13:00:25

[rad11]

http://jsfiddle.net/qewjn1fr/2/

Ten post edytował rad11 18.12.2014, 15:32:00

[phpmax]

Możesz napisać do tego kodu fragment dla pliku graficznego z odsyłaczem a href, bo próbowałem i nie chce mi działać. Nie musi być a href dla całego tła, a jedynie w obrębie pliku graficznego złapanego klamrami a href - a.

[HTML] pobierz, plaintext 
<div style="background:red; width:100%; height:100%">s</div>
 
 
<div id="tlo" style="background:black; width: 1000px; height: 1000px; position:absolute; top:0px; left:0px;">
 
    <a id="klik" href='#' style="color:white;">Kliknij</a>
 
</div>
[HTML] pobierz, plaintext 

Czyli rozumiem, że mogę normalnie załadować tapetę tła w CSS jak powyżej, a w poniższym kodzie dać tak jakby niewidocznego a hrefa dla całego tła?

[rad11]

Tak mozesz zrobic tapete jako tlo tylko wtedy musisz uzyc wlasciwosci background-image. Href nie musi byc dla calego tla.

[phpmax]

Nie chce mi działać.

Zrobiłem według tego tutoriala i też klapa: http://stackoverflow.com/questions/2643529...ackground-image

[HTML] pobierz, plaintext 
<div class="wrapWithBackgroundImage">
    <a href="#" class="invisibleLink"></a>
</div>
 
.wrapWithBackgroundImage {
    background-image: url(...);
}
.invisibleLink {
    display: block;
    left: 55px; top: 55px;
    position: absolute;
    height: 55px width: 55px;
}
[HTML] pobierz, plaintext 

Mianowicie do swojego pliku CSS dodałem:

[HTML] pobierz, plaintext 
/* Page Layout */
 
 
body {
	width: 100%;
	background-image: url(http://www.example.com/image.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	position: relative;
	text-align: center;
	cursor: default;
}
 
.wrapWithBackgroundImage {
    background-image: url(http://www.example.com/image.jpg);
}
 
.invisibleLink {
    display: block;
    left: 55px; top: 55px;
    position: absolute;
    height: 1680px width: 980px;
}
[HTML] pobierz, plaintext 

Następnie do pliku header.html (próba z header.php też nic nie dała) z pliku skórki WP:

[HTML] pobierz, plaintext 
<div class="wrapWithBackgroundImage">
    <a href="http://www.example.com/promo" target="_blank" class="invisibleLink"></a>
</div>
[HTML] pobierz, plaintext 

Jeszcze mam takie pytanko, a gdybym na privie podesłał plik style.css oraz header.html, header.php z mojej skórki to mógłbyś chwilę popróbować je edytować, być może komuś innemu ta sztuka się uda (IMG:style_emoticons/default/wink.gif)

Ten post edytował phpmax 20.12.2014, 00:31:33

[rad11]

Mozesz podeslac.

[phpmax]

Chyba nie da się na tym forum wysyłać załączników, bo nie widzę opcji ich dodawania... ;o(

Ten post edytował phpmax 1.01.2015, 05:31:30