Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Problem z odnośnikiem
Forum PHP.pl > Forum > Przedszkole
o2w5n778
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:
  1. <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>
Damonsson
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
Obrazek ma być tlem pod odnośnik, ale po najechaniu na odnośnik ten obrazek ma się zmieniać
Damonsson
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
A mógł byś dać jakiś przykład tego bo jestem laikiem w programistce i raczej tego nie napisze smile.gif
krispak
W CSS dajesz np
  1. a.menu {
  2. background-image: url("n2.jpg");
  3. }
  4. a.menu:hover {
  5. background-image: url("n1.jpg");
  6. }

i w html
  1. <a href="link do strony" class="menu">Tekst</a>

Reszte ogolnie znajdziesz na tej stronie
Damonsson
No przecież Ci podałem.

Masz gotowca, 30 sekund pisania:

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


  1. <div id="kontener">
  2. <a href="#">Twój odnośnik</a>
  3. </div>
o2w5n778
Oby dwa nie działają albo je źle używam...
Pierwsze wstawiłem tak:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <meta content="text/html; charset=ISO-8859-2"
  3. http-equiv="content-type">
  4. <style type="text/css">
  5. a.menu {
  6. background-image: url("n2.jpg");
  7. }
  8. a.menu:hover {
  9. background-image: url("n1.jpg");
  10. }
  11. </head>
  12. <a href="link do strony" class="menu">Tekst</a>
  13. </body>
  14. </html>


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


to jak wytłumaczysz to: http://64design.ovh.org/przyklad.html ?
krispak
@Damonsson nie trzeba uzywac do tego diva
  1. a.menu {
  2. display: block;
  3. width: 100px;
  4. padding: 10px;
  5. background-image: url(przed);
  6. }
  7. a.menu:hover {
  8. background-image: url(po);
  9. }

  1. <a href="" class="menu">jakis tekst</a>

@o2w5n778 sprawdz czy masz dobre sciezki do obrazow
o2w5n778
Mi już też działa tongue.gif dzięki za fatygę chłopaki
Damonsson
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.