Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML] Problem z odnośnikiem
o2w5n778
post
Post #1





Grupa: Zarejestrowani
Postów: 235
Pomógł: 0
Dołączył: 10.12.2009

Ostrzeżenie: (0%)
-----

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 
  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>
[HTML] pobierz, plaintext


Ten post edytował o2w5n778 26.09.2010, 15:42:32
Go to the top of the page
+Quote Post
Damonsson
post
Post #2





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
o2w5n778
post
Post #3





Grupa: Zarejestrowani
Postów: 235
Pomógł: 0
Dołączył: 10.12.2009

Ostrzeżenie: (0%)
-----

Obrazek ma być tlem pod odnośnik, ale po najechaniu na odnośnik ten obrazek ma się zmieniać
Go to the top of the page
+Quote Post
Damonsson
post
Post #4





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
o2w5n778
post
Post #5





Grupa: Zarejestrowani
Postów: 235
Pomógł: 0
Dołączył: 10.12.2009

Ostrzeżenie: (0%)
-----

A mógł byś dać jakiś przykład tego bo jestem laikiem w programistce i raczej tego nie napisze (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
krispak
post
Post #6





Grupa: Zarejestrowani
Postów: 250
Pomógł: 55
Dołączył: 27.08.2008

Ostrzeżenie: (0%)
-----

W CSS dajesz np
[CSS] pobierz, plaintext 
  1. a.menu {
  2.      background-image: url("n2.jpg");
  3. }
  4. a.menu:hover {
  5.      background-image: url("n1.jpg");
  6. }
[CSS] pobierz, plaintext

i w html
[HTML] pobierz, plaintext 
  1. <a href="link do strony" class="menu">Tekst</a>
[HTML] pobierz, plaintext

Reszte ogolnie znajdziesz na tej stronie
Go to the top of the page
+Quote Post
Damonsson
post
Post #7





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

No przecież Ci podałem.

Masz gotowca, 30 sekund pisania:

[CSS] pobierz, plaintext 
  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. }
[CSS] pobierz, plaintext 


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


Ten post edytował Damonsson 26.09.2010, 16:56:56
Go to the top of the page
+Quote Post
o2w5n778
post
Post #8





Grupa: Zarejestrowani
Postów: 235
Pomógł: 0
Dołączył: 10.12.2009

Ostrzeżenie: (0%)
-----

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


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

Ten post edytował o2w5n778 26.09.2010, 17:08:54
Go to the top of the page
+Quote Post
Damonsson
post
Post #9





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----



to jak wytłumaczysz to: http://64design.ovh.org/przyklad.html ?
Go to the top of the page
+Quote Post
krispak
post
Post #10





Grupa: Zarejestrowani
Postów: 250
Pomógł: 55
Dołączył: 27.08.2008

Ostrzeżenie: (0%)
-----

@Damonsson nie trzeba uzywac do tego diva
[CSS] pobierz, plaintext 
  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. }
[CSS] pobierz, plaintext 

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

@o2w5n778 sprawdz czy masz dobre sciezki do obrazow
Go to the top of the page
+Quote Post
o2w5n778
post
Post #11





Grupa: Zarejestrowani
Postów: 235
Pomógł: 0
Dołączył: 10.12.2009

Ostrzeżenie: (0%)
-----

Mi już też działa (IMG:style_emoticons/default/tongue.gif) dzięki za fatygę chłopaki
Go to the top of the page
+Quote Post
Damonsson
post
Post #12





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 05:30
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn