Forum PHP.pl > [HTML] Problem z odnośnikiem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML] Problem z odnośnikiem

o2w5n778

26.09.2010, 15:40:38

Witam!
Mam oto taki kod dzięki któremu po najechaniu myszką na obrazek/odnośnik zmienia się obrazek na inny, ale jak zrobić żebym mógł napisać jakiś tekst na obrazku/odnośniku?
Chodzi mi to coś takiego jak na:
http://www.webcore.pl/

Kod:

[HTML] pobierz, plaintext 
<a href="link do strony"><img src="n2.jpg" alt="Tekst alternatywny" border="0" onmouseover="this.src = 'n1.jpg'" onmouseout="this.src = 'n2.jpg'" /></a>
[HTML] pobierz, plaintext

Damonsson

26.09.2010, 15:45:29

Odnośnikiem jest Twój obrazek więc, musisz zmienić w programie graficznym to co chcesz aby na nim było napisane. Chyba, że obrazek to ma być tło na którym ma być coś napisane? W takim razie nie tak to powinno wyglądać. Ale zakładam wersję numer 1.

o2w5n778

26.09.2010, 15:48:56

Obrazek ma być tlem pod odnośnik, ale po najechaniu na odnośnik ten obrazek ma się zmieniać

Damonsson

26.09.2010, 15:58:55

Robisz sobie dla danego a:

a {}
a:hover {}

tam umieszczasz tło obrazkowe a pomiędzy <a> </a> nie dajesz już żadnego <img> tylko sam tekst.

Chyba, że ubóstwiasz JS, to wtedy inna sprawa.

o2w5n778

26.09.2010, 16:02:48

A mógł byś dać jakiś przykład tego bo jestem laikiem w programistce i raczej tego nie napisze

krispak

26.09.2010, 16:45:43

W CSS dajesz np

[CSS] pobierz, plaintext 
a.menu {
     background-image: url("n2.jpg");
}
a.menu:hover {
     background-image: url("n1.jpg");
}
[CSS] pobierz, plaintext

i w html

[HTML] pobierz, plaintext 
<a href="link do strony" class="menu">Tekst</a>
[HTML] pobierz, plaintext

Reszte ogolnie znajdziesz na tej stronie

Damonsson

26.09.2010, 16:50:45

No przecież Ci podałem.

Masz gotowca, 30 sekund pisania:

[CSS] pobierz, plaintext 
#kontener a {
    width: 100px;   // tu ustalasz szerokość odnośnika jeśli chcesz. Możesz jeszcze dodać height żeby ustalić wysokość
    padding: 0px 50px; // tutaj odstęp tekstu od boków całego odnośnika
    background: url(przed.jpg); //tutaj tło normalne
    }
#kontener a:hover {
    background: url(po.jpg); //tutaj tło najechanego myszką
 
}
[CSS] pobierz, plaintext

[HTML] pobierz, plaintext 
<div  id="kontener">
<a href="#">Twój odnośnik</a> 
</div>
[HTML] pobierz, plaintext

o2w5n778

26.09.2010, 17:08:08

Oby dwa nie działają albo je źle używam...
Pierwsze wstawiłem tak:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-2"
 http-equiv="content-type">
 <style type="text/css">
a.menu {
     background-image: url("n2.jpg");
}
a.menu:hover {
     background-image: url("n1.jpg");
}
</style>
</head>
<body>
<a href="link do strony" class="menu">Tekst</a>
</body>
</html>
[HTML] pobierz, plaintext

I zamiast obrazka na tle odnosnikiem jakas plamka czerwona jest zamiast obrazka

Damonsson

26.09.2010, 17:13:16

to jak wytłumaczysz to: http://64design.ovh.org/przyklad.html ?

krispak

26.09.2010, 17:14:56

@Damonsson nie trzeba uzywac do tego diva

[CSS] pobierz, plaintext 
a.menu {
     display: block;
     width: 100px;
     padding: 10px;
     background-image: url(przed);
}
a.menu:hover { 
     background-image: url(po);
}
[CSS] pobierz, plaintext

[HTML] pobierz, plaintext 
<a href="" class="menu">jakis tekst</a>
[HTML] pobierz, plaintext

@o2w5n778 sprawdz czy masz dobre sciezki do obrazow

o2w5n778

26.09.2010, 17:16:41

Mi już też działa

dzięki za fatygę chłopaki

Damonsson

26.09.2010, 17:20:40

Cytat(krispak @ 26.09.2010, 18:14:56 )

@Damonsson nie trzeba uzywac do tego diva

Założyłem, że będzie to jedyny odnośnik w danym już istniejącym DIVie. A wtedy niepotrzebnie wg. mnie robić nową klasę.

Oczywiście, że nie trzeba używać dodatkowego DIVa.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.