|
Tytuł: zmiana obrazka w linku Wiadomość wysłana przez: Kylo0 Sierpień 08, 2007, 10:54:08 Witam. Zrobiłem swoją stronę i wpadłem na pewien pomysł, ale niewiem jak to zrobić. Otóż mam 2 obrazki - pomaranczowy i zielony. I chodzi o to...Ze ten obrazek ma byc linkiem. Tzn. glonwy to pomaranczowy a po najechaniu na niego zeby zmienil na zielony. Chodzi mi że mam obrazek on.jpg i off.jpg. Główny to off.jpg a po najechaniu na off zeby zmienil sie obrazek na on.jpg. Ja chce kilka takich rodzajow zrobic na jednej stronie. Da sie tak? Jak?
Tytuł: Odp: zmiana obrazka w linku Wiadomość wysłana przez: andreoid Sierpień 12, 2007, 16:00:41 Witaj Kylo0
Nie mogę odnieść się konkretnie do Twojego pytania, bo nieznam szczegółów co do grafiki i miejsca w którym ma być ona zastosowana jako efekt rollover. Przytoczę przykłady czterech podstawowych metod, które można zastosować w różnych sytuacjach. Poniżej opisane przykłady zawarte są na stronie testowej: http://4images.fotoan.com/rollover/rollover.html (http://4images.fotoan.com/rollover/rollover.html) Przykład 1. Pierwsza możliwość, to wykorzystanie tak zwanego zdarzenia onload, przypisanego znacznikowi <body>, gdzie w momencie wczytania (pobrania) strony WWW do przeglądarki, wywoływany jest zwykle jakiś skrypt, często jest to skrypt napisany w języku JavaScript. W naszym przypadku JavaScript steruje efektem rollover. Między znacznikami <head> i </head>, wklejamy JavaScript Kod: <script type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> a następnie w znaczniku <body> dodajemy Kod: onload="MM_preloadImages('http://4images.fotoan.com/rollover/on.jpg')" całość będzie wyglądać tak Kod: <body onload="MM_preloadImages('http://4images.fotoan.com/rollover/on.jpg')"> gdzie Cytuj http://4images.fotoan.com/rollover/on.jpg jest to ścieżka do grafiki, która pojawia sią, po najechaniu na grafikę stałą.Natomiast między znacznikami <body> i </body>, w miejscu w którym chcemy uzyskać efekt rollover wklejamy Kod: <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('off','','http://4images.fotoan.com/rollover/on.jpg',1)"><img src="http://4images.fotoan.com/rollover/off.jpg" alt="rollover" name="off" width="100" height="100" border="0" id="off" /></a> Elementy graficzne: (http://4images.fotoan.com/rollover/off.jpg) off.jpg (http://4images.fotoan.com/rollover/on.jpg) on.jpg Metoda ta, pozwal na załadowanie wszystkich elementów efektu rollover i używana jest przy kompleksowych projektach, gdzie efekt rollover musi funkcjonować natychmias po załadowaniu strony; np. menu. Minusem tej medody, jest wydłużony czas ładowania strony. Przykład 2. Uprostrzoną wersją przykładu 1, jest medoda którą możemy wykorzystać w pojedyńczych grafikach, które nie wymagają natychmiastowej reakcji efektu rollover, a co za tym idzie nie są ładowane równolegle ze stroną. Między znacznikami <body> i </body>, w miejscu w którym chcemy uzyskać efekt rollover wklejamy Kod: <a href="#"><img src="http://4images.fotoan.com/rollover/off.jpg" onmouseover="src='http://4images.fotoan.com/rollover/on.jpg'" onmouseout="src='http://4images.fotoan.com/rollover/off.jpg'" width="100" height="100" border="0"></a> gdzie http://4images.fotoan.com/rollover/off.jpg, jest to ścieżka do grafiki stałej,a http://4images.fotoan.com/rollover/on.jpg jest to ścieżka do grafiki, która zostanie załadowana i ukaże się, po najechaniu kursorem na element stały. Minusem tej metody może być wydłużony czas na reakcję efektu rollover, w przypadku użycia "dużej" grafiki. Elementy graficzne: (http://4images.fotoan.com/rollover/off.jpg) off.jpg (http://4images.fotoan.com/rollover/on.jpg) on.jpg Przykład 3. Metoda trzecia, jest ciekawym połączeniem jednego elementu grafiki oraz CSS (Cascading Style Sheets - Kaskadowe arkusze stylów). Medoda ta, może zostać użyta przy kompleksowych projektach i nie ma ona, żadnego większego wpływu na szybkość ładowania danej strony. Ponadto jest ona przyjazna dla wyszukiwarek, w przypadku linków (menu) Miedzy znacznikami <head> i </head>, lub odpowiednim pliku CSS, wklejamy Kod: <style type="text/css"> <!-- .main-menu { padding:0; margin:0; list-style-type: none; height: 100px; width: 100px; } .main-menu li a { display:block; height:100px; text-indent:-1000em; background-position: 0 0; } .main-menu li.mainNav-on { width:100px; background: url(off_on.jpg) 0 -100px no-repeat; } .main-menu li.mainNav-on a { width:100px; background: url(off_on.jpg) 0 0 no-repeat; } .main-menu li.mainNav-on a:hover { background: transparent; } --> </style> Między znacznikami <body> i </body>, w miejscu w którym chcemy uzyskać efekt rollover wklejamy Kod: <ul class="main-menu"> <li class="mainNav-on"><a href="#">on</a></li> </ul> Element graficzny: (http://4images.fotoan.com/rollover/off_on.jpg) off_on.jpg Przykład 4. Metodę czwartą, możemy określić jako metodę profesjonalną, gdzie w 100% wykorzystujemy CSS. Metoda ta pozwala na tworzenie bloków z kolorowym podkładem, oraz generuje efekt rollover. Jest ona bardzo przyjazna dla wyszukiwarek i pod żadnym względem nie obciąża danej strony. Miedzy znacznikami <head> i </head> , lub odpowiednim pliku CSS, wklejamy Kod: <style type="text/css"> <!-- .grafik{ width:100px; height:100px; } a.grafiklink{ display: block; background-color:#FF9900; width: 100px; height:100px; } a.grafiklink:visited { display: block; background-color:#FF9900; width: 100px; height:100px; } a.grafiklink:hover { background-color:#009900; width: 100px; height:100px; } --> </style> Między znacznikami <body> i </body>, w miejscu w którym chcemy uzyskać efekt rollover wklejamy Kod: <div class="grafik"> <a href="#" class="grafiklink"></a> </div> Tytuł: Odp: zmiana obrazka w linku Wiadomość wysłana przez: Kylo0 Wrzesień 04, 2007, 18:50:59 Dzieki :) Pomogles mi ! Wielkie dzieki !
|