|
(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi |
|
Alati teme | Način prikaza |
13. 02. 2012. | #1 |
expert
Expert
Datum učlanjenja: 15.03.2011
Poruke: 518
Hvala: 16
20 "Hvala" u 17 poruka
|
Mala pomoc oko promene pozadine DIV-a
Napisao sam jednostavan css kod za promenu slike pri prelasku misem (hover) medjutim ono sto zelim da postignem je da i kada kliknem promeni se slika ( jedna je crno-bela a druga u boji- pravim neki meni za kategorije)... to nebi bio nikakav problem kada bi se samo jednom menjala slika ali kako da napravim da se svakim klikom ove dve slicice-ikonice smenjuju...
Kod je: Kôd:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #kat1 { background-image:url(ikoniceKategorije/07.jpg); width:30px; height:30px; float:left; } #kat1:hover { background-image:url(ikoniceKategorije/07h.jpg); } #kat2 { background-image:url(ikoniceKategorije/06.jpg); width:30px; height:30px; float:left; } #kat2:hover { background-image:url(ikoniceKategorije/06h.jpg); } #kat3 { background-image:url(ikoniceKategorije/05.jpg); width:30px; height:30px; float:left; } #kat3:hover { background-image:url(ikoniceKategorije/05h.jpg); } #kat4 { background-image:url(ikoniceKategorije/04.jpg); width:30px; height:30px; float:left; } #kat4:hover { background-image:url(ikoniceKategorije/04h.jpg); } #kat5 { background-image:url(ikoniceKategorije/03.jpg); width:30px; height:30px; float:left; } #kat5:hover { background-image:url(ikoniceKategorije/03h.jpg); } #kat6 { background-image:url(ikoniceKategorije/02.jpg); width:30px; height:30px; float:left; } #kat6:hover { background-image:url(ikoniceKategorije/02h.jpg); } #kat7 { background-image:url(ikoniceKategorije/01.jpg); width:30px; height:30px; float:left; } #kat7:hover { background-image:url(ikoniceKategorije/01h.jpg); } #div { width:220px; height:30px; overflow:hidden; } </style> </head> <body> <div id="div"> <div id="kat1"></div> <div id="kat2"></div> <div id="kat3"></div> <div id="kat4"></div> <div id="kat5"></div> <div id="kat6"></div> <div id="kat7"></div> </div> </body> </html> verovatno je mnogo bolje koristiti class umesto ID... Hvala unapred!
__________________
I'm not sexy and I know IT! Poslednja izmena od AdriaMart : 13. 02. 2012. u 17:05. |
13. 02. 2012. | #2 |
banned
Professional
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
|
Pošto se slike razlikuju u jednom slovu, možeš probati:
Kôd:
//jQuery $(function() { $('#div div').click(function() { var elem = $(this); var style = elem.css('background-image'); if(/h\.jpg/.test(style)) { elem.css('background-image', style.replace(/h\.jpg/, '.jpg')); } else { elem.css('background-image', style.replace(/\.jpg/, 'h.jpg')); } }); });
__________________
Don't look at me; I'm lost too. “If you can't dazzle them with brilliance, baffle them with bul*s**t.” |
13. 02. 2012. | #3 |
expert
Expert
Datum učlanjenja: 15.03.2011
Poruke: 518
Hvala: 16
20 "Hvala" u 17 poruka
|
OK, ali kada se npr. klikne dva puta na jednu ikonicu potrebno je da se vrati ikonica u boji
__________________
I'm not sexy and I know IT! |
13. 02. 2012. | #4 |
banned
Professional
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
|
Pa zar se to ne dešava, u kom browser-u testiraš kod. Ili ja nisam dobro razumeo problem.
HTML kôd:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #kat1 { background-image:url(ikoniceKategorije/07.jpg); width:30px; height:30px; float:left; } #kat2 { background-image:url(ikoniceKategorije/06.jpg); width:30px; height:30px; float:left; } #kat3 { background-image:url(ikoniceKategorije/05.jpg); width:30px; height:30px; float:left; } #kat4 { background-image:url(ikoniceKategorije/04.jpg); width:30px; height:30px; float:left; } #kat5 { background-image:url(ikoniceKategorije/03.jpg); width:30px; height:30px; float:left; } #kat6 { background-image:url(ikoniceKategorije/02.jpg); width:30px; height:30px; float:left; } #kat7 { background-image:url(ikoniceKategorije/01.jpg); width:30px; height:30px; float:left; } #div { width:220px; height:30px; overflow:hidden; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function() { $('#div div').click(function() { var elem = $(this); var style = elem.css('background-image'); if(/h\.jpg/.test(style)) { elem.css('background-image', style.replace(/h\.jpg/, '.jpg')); } else { elem.css('background-image', style.replace(/\.jpg/, 'h.jpg')); } }); }); </script> </head> <body> <div id="div"> <div id="kat1"></div> <div id="kat2"></div> <div id="kat3"></div> <div id="kat4"></div> <div id="kat5"></div> <div id="kat6"></div> <div id="kat7"></div> </div> </body> </html>
__________________
Don't look at me; I'm lost too. “If you can't dazzle them with brilliance, baffle them with bul*s**t.” |
13. 02. 2012. | #5 |
expert
Expert
Datum učlanjenja: 15.03.2011
Poruke: 518
Hvala: 16
20 "Hvala" u 17 poruka
|
Verovatno je greska sto sam ja umesto ID-ova (#) stavio klase u <style> tagu ... u mom kodu
HVALA!
__________________
I'm not sexy and I know IT! Poslednja izmena od AdriaMart : 13. 02. 2012. u 21:17. |
13. 02. 2012. | #6 |
banned
Professional
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
|
Postavi izmenjen kod. Pokušaj i da dodaš različite klase za različita stanja, pa kada se klikne na elemenat ti menjaj (dodaj/uklanjaj) odgovarajuće klase.
__________________
Don't look at me; I'm lost too. “If you can't dazzle them with brilliance, baffle them with bul*s**t.” Poslednja izmena od Br@nkoR : 13. 02. 2012. u 22:54. |
|
|