Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
 Reply to this topicStart new topic
> [HTML][CSS]<img scr, atrybut title>, zmiana koloru obramowania, tła
ciapus4
post 2.06.2013, 11:39:26
Post #1





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

Witam, czy jest możliwość zmiany tła, oraz koloru obrysu ramki po najechaniu na dany obrazek, jak tu ?

przykład
Go to the top of the page
+Quote Post
Posio
post 2.06.2013, 11:58:27
Post #2





Grupa: Zarejestrowani
Postów: 417
Pomógł: 44
Dołączył: 23.06.2011

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

css: hover
background-color + border
Go to the top of the page
+Quote Post
ciapus4
post 2.06.2013, 12:04:43
Post #3





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

A, mogę prosić przykład kodu ?
Go to the top of the page
+Quote Post
Michael2318
post 2.06.2013, 12:09:32
Post #4





Grupa: Zarejestrowani
Postów: 651
Pomógł: 116
Dołączył: 3.06.2012
Skąd: Lędziny

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

[HTML] pobierz, plaintext 
  1. <style>
  2. .klasa{
  3. width: 500px;
  4. height: 300px;
  5. text-decoration: underline;
  6. background-color: green;
  7. border: 5px solid red;
  8. }
  9.  
  10. .klasa:hover{
  11. border: 5px solid blue;
  12. background-color: yellow;
  13. }
  14. </style>
  15. <div class="klasa">TEXT</div>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
ciapus4
post 2.06.2013, 12:20:10
Post #5





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

przykład

raczej, chodzi mi o to, jak kursor wędruje na zdjęcie pojawia się w ramce opis z <title> i tam bym chciał zmienić tło i obramowanie, dajmy na to na czerwony.
Go to the top of the page
+Quote Post
pedro84
post 2.06.2013, 12:35:43
Post #6





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

To już Javascript i zdarzenie onmouseover.


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
ciapus4
post 2.06.2013, 12:40:27
Post #7





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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




Chodzi mi o coś takiego.
Go to the top of the page
+Quote Post
Talidali
post 2.06.2013, 12:46:06
Post #8





Grupa: Zarejestrowani
Postów: 79
Pomógł: 19
Dołączył: 31.05.2013

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

http://jqueryui.com/tooltip/


--------------------
Szukam pracy za granicą jako FrontendDeveloper - AKTUALNE

forum.php.pl/PoszukujePraca_Frontend_Developer_t218107.html
Go to the top of the page
+Quote Post
ciapus4
post 2.06.2013, 13:07:33
Post #9





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

A, prościej ?
Go to the top of the page
+Quote Post
pedro84
post 2.06.2013, 13:29:57
Post #10





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

Cytat(ciapus4 @ 2.06.2013, 14:07:33 ) *
A, prościej ?

A czego nie rozumiesz?


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
Posio
post 2.06.2013, 14:25:42
Post #11





Grupa: Zarejestrowani
Postów: 417
Pomógł: 44
Dołączył: 23.06.2011

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

angielskiego ? ^^
Go to the top of the page
+Quote Post
Talidali
post 2.06.2013, 14:30:12
Post #12





Grupa: Zarejestrowani
Postów: 79
Pomógł: 19
Dołączył: 31.05.2013

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

Baw się.

Kod
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>

<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>


</body>
</html>


--------------------
Szukam pracy za granicą jako FrontendDeveloper - AKTUALNE

forum.php.pl/PoszukujePraca_Frontend_Developer_t218107.html
Go to the top of the page
+Quote Post
ciapus4
post 2.06.2013, 20:05:05
Post #13





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

Nie, no zkumałem tylko jak przerobić kod dla obrazka ?, żeby dymek się pojawiał na nim ?
Go to the top of the page
+Quote Post
com
post 2.06.2013, 22:34:09
Post #14





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

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

http://www.jqueryscript.net/css3-html5/Pur...S3-Tooltip.html

i zamiast span obrazek wink.gif
Go to the top of the page
+Quote Post
ciapus4
post 3.06.2013, 19:47:27
Post #15





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

Dzięki, a gdzie się w kodzie strony wkleja taki kod ? js code.

[HTML] pobierz, plaintext 
  1. var Tips2 = new Tips($$('.Tips2'), {
  2. 	initialize:function(){
  3. 		this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
  4. 	},
  5. 	onShow: function(toolTip) {
  6. 		this.fx.start(1);
  7. 	},
  8. 	onHide: function(toolTip) {
  9. 		this.fx.start(0);
  10. 	}
  11. });
[HTML] pobierz, plaintext


A, dlaczego taki kod nie działa

tu kod

a, chodzi mi o taki tooltip

tu demo

Ten post edytował ciapus4 3.06.2013, 20:08:27
Go to the top of the page
+Quote Post
pedro84
post 3.06.2013, 20:08:09
Post #16





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

Pomiędzy znacznikami <script></script>


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
ciapus4
post 3.06.2013, 21:02:45
Post #17





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

A, dlaczego taki kod nie działa

kod tu

a, chodzi mi o taki tooltip

demo
Go to the top of the page
+Quote Post
lobopol
post 3.06.2013, 21:12:52
Post #18





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

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

Bo nie masz tam dodanego skryptu, bez którego var Tips1 = new Tips($$('.Tips1')); nie robi nic (co najwyżej błędem sypnie)


--------------------
pehap.pl - moje portfolio
Go to the top of the page
+Quote Post
ciapus4
post 3.06.2013, 21:22:05
Post #19





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 25.08.2012

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

No, przecież na dole jest JS code, a jak nie to jak powinno to wyglądać ?
Go to the top of the page
+Quote Post
lobopol
post 3.06.2013, 21:42:34
Post #20





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

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

No chłopie, to są absolutne podstawy pomyśl trochę ten tooltip jest jakąś biblioteką js. Bez dołączenia tej biblioteki nie możesz jej użyć.

http://jsfiddle.net/53hsJ/10/
zauważ, że dodałem mootols more

Ten post edytował lobopol 3.06.2013, 21:43:26


--------------------
pehap.pl - moje portfolio
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

2 Stron V   1 2 >
Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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 Wersja Lo-Fi Aktualny czas: 22.05.2025 - 05:34
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn