Stworzenie Menu I Zmiana Zdjęcia Po Naciśnięciu Przycisku

[Mark18]

Witam

 

*potrzebuje menu rozwijane zrobione w css, ajax tak zeby po wyłączeniu javy i java script dalej działało.

* zmiana zdjęcia po naciśnięciu przycisku.

 

Te 2 rzeczy mają być podone tak jak na tej stronie: www.meblebrysch.pl stronka jest moja więc można bez obaw korzystać.

 

 

pozdrawiam

[moe]

strona sie nie otwiera (petla bez konca?)

[Mark18]

?? Sprawdz jeszcze raz u mnie wszystko działa.

 

pozdro

[ULLISSES]

Nie bierz się za coś, skoro nie potrafisz używać Google.

 

Zapoznaj się z takimi linijkami - poczytaj o nich:

a: hoverdisplay: none;display: hidden;width: 150px;height: 24px;

* liczby w 2 ostatnich linijkach są tylko przykładowe

 

Podmiana grafiki w menu:

http://www.devtouch.net/css-html/graphic-m...image-swapping/

Oczywiście można zrobić prościej.

Ostatecznie można nawet tak:

a { background: url(grafika.jpg) }a: hover { background: url (inna.jpg) }

Doczytaj o Ajax.

 

Na kij Ci rozwijane menu działające bez JS? Obecnie jedyna przeglądarka bez JS to Linx/Lynx/Links - tudzież inne tekstowe.

 

Odnośnie strony, to zamiast klepać menu dobierz lepiej czcionki i grafikę, oraz pozbądź się Flasha - na podstawie tego co wyświetla śmiem twierdzić, że jest tam zbędny.

[Mark18]

No to menu zostawiam.

 

Ale flash chce zastąpić czyms podobnym o mniejszej wadze.

 

pozdro

[ULLISSES]

Musisz poczekać na standard HTML z Canvas.

 

Ewentualnie użyć jednej z 4 opcji:

a) ajax - wygląda identycznie jak obecnie to we flash, każdy obrazek ładowany jest po naciśnięciu przycisku

b) js - jak wyżej, lecz wszystkie obrazki ładowane są od razu

c) iframe - najprostsze, ale obecnie niestosowane rozwiązanie - webmasterzy na niego krzywo patrzą (nie wiem czemu) - działanie podobne do ajax (każdy obrazek ładowany jest na życzenie)

d) przewijany div - podobne do js, tyle ze przewijaniem sterujemy przez linki i etykiety

 

Podsumowując opcja d jest najlepsza od strony programisty i najprostsza. Problemem może być ładowanie dużej ilości obrazków na starcie, które użytkownik nie koniecznie chce oglądać. Dlatego pozostaje opcja użycia ajax. Mamy więc div z obrazkiem i 2 strzałki (jak we flashu) klikamy na jedną bądź drugą i nowy obrazek zostaje załadowany. W przypadku, gdy użytkownik nie chce korzystać z tej opcji, to nie leci do niego niepotrzebnie cała grafika.

 

Wymień grafikę, dorzuć jakieś tło. Funkcje menu, które się nie rozwijają można by rozpracować graficznie jak w przykładzie wyżej. Resztę zostawić w JS tak jak jest. Czcionka do zmiany i stopka jest tragiczna.

 

Jak zapisujesz pliki JPG, to zwróć uwagę na ich jakość. Jeśli tworzysz w jakimś programie, który nie ma ustawień jakości dla JPG (np Paint - o dziwo nadal bardzo funkcjonalny program przy niektórych zabiegach), to zapisuj jako BMP. Następnie przy pomocy darmowego Irfan View (lub innego programu) zapisuj do JPG ustawiając jakość powyżej 88%. Dla gradientów może być nawet potrzebne ustawienie 95%. Oczywiście im wyższa jakość, tym zdjęcie jest większe. Cały ten akapit piszę w związku z "Uwaga!", który aż wali po oczach artefaktami powstałymi przy zbyt dużej kompresji - zazwyczaj przy pomocy Paint.

[Mark18]

No dobra a duza roznice robi flash miedzy js?

 

pozdro

[ULLISSES]

Nie wiem, ile obecnie zajmują Twoje flashe, ale w przypadku użycia js/ajax, to kwestia tylko rozmiaru zdjęć, bo rozmiar kodu jest pomijalny. Do tego łatwiej jest go edytować, podmieniać zdjęcia i nie trzeba żadnych wtyczek.

 

Proste skrypty do wykorzystania:

http://i-code.co.uk/javascript/imageviewer.php (otwiera obrazek z listy)

http://javascriptkit.com/script/script2/pl...ageviewer.shtml (powiększa obrazek)

 

No i na dłuższą metę dochodzi taki drobiazg, że wyszukiwarki nie potrafią indeksować zawartości plików flash - jeśli więc wklepię w wyszukiwarkę nazwę modelu danego stołu z Waszej oferty, to nie wyskoczy w wynikach, jeśli nazwa jest tylko w animacji Flash.

[Mark18]

Ja myslalem ze js/ajax tez nie indeksuje?

 

Jak widać nie tylko nazwu produktów są we flash.

pozdrawiam

Edytowane 13 Lutego 2010 przez Mark18

[ULLISSES]

Bezpośrednio nie, bo jest generowana przez JS. Natomiast same pliki jpg leżące na serwerze jak najbardziej.

Jeśli więc mamy np modele Awiro, Awiro Metal i na serwerze będą leżały pliki jpg o takich nazwach, to zostaną zindeksowane (jeśli nie zabronisz tego z poziomu .httaccess). Wtedy wyszukiwarka wyświetli je w wynikach przy zapytaniu "Awiro". W przypadku grafiki wkomponowanej w Flash (jeśli zamknięta jest w pliku SWF), to roboty wyszukiwarek nie mają szans jej odnalezienia.

 

Poza tym w przypadku powyższego przykładu skryptu, nazwy modeli będą linkami, co daje im wyższą wartość w wyszukiwaniu niż sam tekst.

 

Odnośnie pytania z PW:

O grafice napisałem wyżej, że zbyt mocna kompresja odbija się na jakości. Widoczne szczególnie w rozdzielczości 1024x768, której wg statystyk Gemius używa prawie 1/3 internautów.

 

Czcionka jest domyślna, a niebieskie linki średni wyglądają. Zapoznaj się z tematem arkuszy CSS.

[Mark18]

Aha. To jak skorzystam z tego skryptu. to mozna zrobic jeszcze ze jak sie dacisnie powiekszone zdjecie to przechodzi do tego modelu?

 

 

A co jesli chodzi o grafike i czcionke ?:P

 

pozdro

Edytowane 13 Lutego 2010 przez Mark18

[ULLISSES]

Można. Chociaż teraz rzuciłem okiem na kod i o ile działanie jest ok, to zapis jest trochę naginany - walidator HTML przyczepi się "data-plusimage" i "data-plussize".

 

Podając ten link chodziło mi raczej o sam przykład działania, niż o konkretny kod. Pogoogluj trochę a na pewno znajdziesz wiele ciekawych rozwiązać, które przydadzą się na stronie.

 

Sposób zapisu/kompresji grafiki opisałem wyżej.

 

Nad czcionką można by się zastanowić. Jeśli Ci się podoba, to ok. Jeśli jednak chcesz mieć alternatywę, to:

http://www.w3schools.com/css/css_websafe_fonts.asp

 

Poza tym:

Sprawdzanie poprawności HTML: http://validator.w3.org/

Sprawdzanie poprawności CSS: http://jigsaw.w3.org/css-validator/

[Mark18]

Sprawdzanie poprawności HTML: http://validator.w3.org/ wywala same głupoty według mnie :)

 

 

pozdro

[ULLISSES]

To raczej Twój edytor generuje własną interpretację starego standardu z użyciem tabel włącznie.

Przykład pierwszy z brzegu:

http://en.wikipedia.org/wiki/Favicon

[Mark18]

Czy to zle wplywa na cos ?:)

 

pozdro

[ULLISSES]

Na opinię o webmasterze.

Od strony użytkownika na nic - każda przeglądarka i tak poprawia błędy w kodzie. ;]

[Mark18]

Ja tam webmasterem nie jestem specjalnie. Tak średnio na jeża.

 

pozdro

[Mark18]

Sorry ze post pod postem:

 

Jak zrobić to przechodzenie po nacisnieciu duzego obrazka?

 

<html><head><title>Photo Album Viewer</title><style>a:visited{color:black;font-family:verdana}a:link{color:black;font-family:verdana}a:hover{color:blue;font-family:verdana}p, td {color:black;font-family:verdana;font-size:8pt}h1 {color:black;font-family:verdana;font-size:12pt}</style><script>/****************************************************//** Free script for any use, but please include	**//** a link to i-code.co.uk in any redistribution.  **//**												**//** Author : Stephen Griffin, www.i-code.co.uk	 **//****************************************************/function changeImage(){	var list = document.getElementById('optionlist');	document.mainimage.src = list.options[list.selectedIndex].value;}function prevImage(){	var list = document.getElementById('optionlist');	if(list.selectedIndex == 0)	{		list.selectedIndex = list.options.length-1;	}	else	{		list.selectedIndex--;	}	changeImage();}function nextImage(){	var list = document.getElementById('optionlist');	if(list.selectedIndex == list.options.length-1)	{		list.selectedIndex = 0;	}	else	{		list.selectedIndex++;	}	changeImage();}</script></head><body onLoad="java script:changeImage()"><center><h1>Photo Album Viewer</h1></center><table align="center" border="0"><tr><td colspan="3" align="center"><img name="mainimage" border="1"></td></tr><tr>	<td align="left"><input type="button" value="<- Back" onClick="java script:prevImage()"></td>	<td align="center">		<select id="optionlist" onChange="java script:changeImage()">		<option value="image1.jpg">First Image</option>		<option value="image2.jpg">Second Image</option>		<option value="image3.jpg">Third Image</option>		<option value="image4.jpg">Fourth Image</option>		<option value="image5.jpg">Fifth Image</option>	</select>		</td>	<td align="right"><input type="button" value="Next->" onClick="java script:nextImage()"></td></tr></table><p align="center"><a href="http://www.i-code.co.uk">Javascript</a> | <a href="http://www.i-code.co.uk/javascript/photoalbum.php">Photo Album Viewer</a></p></body></html>

Edytowane 14 Lutego 2010 przez Mark18

[ULLISSES]

<html><head><title>Image Viewer</title><style>a:visited{color:black;font-family:verdana}a:link{color:black;font-family:verdana}a:hover{color:blue;font-family:verdana}td {color:black;font-family:verdana;font size:8pt}p {color:black;font-family:verdana;font size:8pt;text-decoration: none}h1 {color:black;font-family:verdana;font size:12pt;text-decoration: none}</style><script>function changeItem(foto, link){	document.mainimage.src = foto;	document.links['mainlink'].href = link;}</script></head><body><h1 align="center">In-line Image Viewer</h1><p align="center"><a href="java script:changeItem('image1.jpg','link1.htm')">Image 1</a><a href="java script:changeItem('image2.jpg','link2.htm')">Image 2</a><a href="java script:changeItem('image3.jpg','link3.htm')">Image 3</a><a href="java script:changeItem('image4.jpg','link4.htm')">Image 4</a><a href="java script:changeItem('image5.jpg','link5.htm')">Image 5</a></p><p align="center"><a name="mainlink" href="image1.jpg"><img name="mainimage" src="image1.jpg" border="0"></a></p></body></html>

Uwaga:: Silnik forum rozłącza napis "javascript" na 2 oddzielne wyrazy. Przy zapisywaniu strony połącz to w jeden wyraz.

 

Pozwoliłem sobie zmodyfikować kod. Teraz masz podmianę obrazka i linku jednocześnie. Pierwszy parametr to nazwa pliku graficznego, drugi to link do podstrony mającej się otworzyć po kliknięciu na obrazek.

 

Można jeszcze zmodyfikować lekko kod. Zamiast napisów "Image 1", "Image 2" mogą być miniaturki obrazków (zapisane na serwerze jako image1_m.jpg, image2_m.jpg), a klikniecie będzie otwierać większą wersję obrazka (z obecnymi nazwami).

 

Idąc dalej, można obrazek otworzyć w wewnątrz obiektu 'div' będącego warstwę wyżej niż tekst, ale w obecnej formie też nie jest źle. Wszystko zależy, jak będzie wyglądał końcowy układ treści na stronie.

 

Edit:

Widzę, że wziąłeś inny kod. Tamten też był dobry. Zmodyfikowana wersja wyżej.

[Mark18]

A co powiesz o tym innym kodzie mógłbyś spojrzeć :P

 

Cos mi to nie działa daje do jakiej podstrony ma przechodzic ale wyswietla sie image1 ?

 

Edit: juz ok

 

A jak zrobić zeby image1, 2 ,3 ,4 ... byly pod spodem?

pozdro

Edytowane 14 Lutego 2010 przez Mark18

[ULLISSES]

1. Ten drugi (nowy kod) działa poprawnie. Rozumiem, że chciałbyś także po kliknięciu na obrazek otwierać stronę, tak? Podumam.

 

2. Co rozumiesz przez "byly pod spodem"? Zmiana kolejności napisów i grafiki to chyba nie jest problem - wystarczy je zamienić miejscami w kodzie.

 

Edit:

Gotowe. Pozwoliłem sobie na małe poprawki. Nie zapomnij połączyć "java script" w "javascript".

 

<html><head><title>Photo Album Viewer</title><style>a:visited{color:black;font-family:verdana}a:link{color:black;font-family:verdana}a:hover{color:blue;font-family:verdana}p, td {color:black;font-family:verdana;font-size:8pt}h1 {color:black;font-family:verdana;font-size:12pt}.hide {display: none}.center {text-align: center}</style><script>/****************************************************//** Author : Stephen Griffin, www.i-code.co.uk	 **//****************************************************/function changeImage(){	var olist = document.getElementById('optionlist');	var llist = document.getElementById('linklist');	llist.selectedIndex = olist.selectedIndex; 	document.mainimage.src = olist.options[olist.selectedIndex].value;	document.links['mainlink'].href = llist.options[llist.selectedIndex].value; }function prevImage(){	var olist = document.getElementById('optionlist');	if(olist.selectedIndex == 0)	{		olist.selectedIndex = olist.options.length-1;	}	else	{		olist.selectedIndex--;	}	changeImage();}function nextImage(){	var olist = document.getElementById('optionlist');	if(olist.selectedIndex == olist.options.length-1)	{		olist.selectedIndex = 0;	}	else	{		olist.selectedIndex++;	}	changeImage();}</script></head><body onLoad="java script:changeImage()"><h1 class="center">Photo Album Viewer</h1><table align="center" border="0"><tr><td colspan="3" align="center"><a name="mainlink" href="test.htm"><img name="mainimage" border="1"></a></td></tr><tr>	<td align="left"><input type="button" value="<- Back" onClick="java script:prevImage()"></td>	<td align="center">		<select id="optionlist" onChange="java script:changeImage()">		<option value="image1.jpg">First Image</option>		<option value="image2.jpg">Second Image</option>		<option value="image3.jpg">Third Image</option>		<option value="image4.jpg">Fourth Image</option>		<option value="image5.jpg">Fifth Image</option>	</select>   <select id="linklist" class="hide">		<option value="link1.html">1</option>		<option value="link2.html">2</option>		<option value="link3.html">3</option>		<option value="link4.html">4</option>		<option value="link5.html">5</option>	</select>	</td>	<td align="right"><input type="button" value="Next->" onClick="java script:nextImage()"></td></tr></table></body></html>

[Mark18]

Dzieki ale sprawdze dopiero jutro dzisiaj padam :)

 

 

pozdro

[ULLISSES]

Tak jak prosiłeś w PW, zrobione na więcej niż jedną grupę:

<html><head><title>Photo Album Viewer</title><style>a:visited{color:black;font-family:verdana}a:link{color:black;font-family:verdana}a:hover{color:blue;font-family:verdana}p, td {color:black;font-family:verdana;font-size:8pt}h1 {color:black;font-family:verdana;font-size:12pt}.hide {display: none}.center {text-align: center}</style><script>/****************************************************//** Author : Stephen Griffin, www.i-code.co.uk     **//****************************************************/function changeImage(number){    var olist = document.getElementById('optionlist'+number);    var llist = document.getElementById('linklist'+number);    llist.selectedIndex = olist.selectedIndex;    document.links['mainlink'+number].href = llist.options[llist.selectedIndex].value;    document.images['mainimage'+number].src = olist.options[olist.selectedIndex].value}function prevImage(number){    var olist = document.getElementById('optionlist'+number);    if(olist.selectedIndex == 0)    {        olist.selectedIndex = olist.options.length-1;    }    else    {        olist.selectedIndex--;    }    changeImage(number);}function nextImage(number){    var olist = document.getElementById('optionlist'+number);    if(olist.selectedIndex == olist.options.length-1)    {        olist.selectedIndex = 0;    }    else    {        olist.selectedIndex++;    }    changeImage(number);}</script></head><body onLoad="javascript:changeImage(1);changeImage(2)"><h1 class="center">Photo Album Viewer</h1><table align="center" border="0"><tr><td colspan="3" align="center"><a name="mainlink1" href="test.htm"><img name="mainimage1" border="1"></a></td></tr><tr>    <td align="left"><input type="button" value="<- Back" onClick="javascript:prevImage(1)"></td>    <td align="center">        <select id="optionlist1" onChange="javascript:changeImage(1)">        <option value="image1.jpg">First Image</option>        <option value="image2.jpg">Second Image</option>        <option value="image3.jpg">Third Image</option>        <option value="image4.jpg">Fourth Image</option>        <option value="image5.jpg">Fifth Image</option>    </select>   <select id="linklist1" class="hide">        <option value="link1.html">1</option>        <option value="link2.html">2</option>        <option value="link3.html">3</option>        <option value="link4.html">4</option>        <option value="link5.html">5</option>    </select>    </td>    <td align="right"><input type="button" value="Next->" onClick="javascript:nextImage(1)"></td></tr><tr><td colspan="3" align="center"><a name="mainlink2" href="test.htm"><img name="mainimage2" border="1"></a></td></tr><tr>    <td align="left"><input type="button" value="<- Back" onClick="javascript:prevImage(2)"></td>    <td align="center">        <select id="optionlist2" onChange="javascript:changeImage(2)">        <option value="nasz1m.jpg">First Image</option>        <option value="nasz2m.jpg">Second Image</option>        <option value="nasz3m.jpg">Third Image</option>        <option value="nasz4m.jpg">Fourth Image</option>        <option value="nasz5m.jpg">Fifth Image</option>    </select>   <select id="linklist2" class="hide">        <option value="link1.html">1</option>        <option value="link2.html">2</option>        <option value="link3.html">3</option>        <option value="link4.html">4</option>        <option value="link5.html">5</option>    </select>    </td>    <td align="right"><input type="button" value="Next->" onClick="javascript:nextImage(2)"></td></tr></table></body></html>

Zasada jest prosta. Każda nowa grupa ma swój numer:

- optionlist1, linklist1, prevImage(1), changeImage(1), nextImage(1)

- optionlist2, linklist2, prevImage(2), changeImage(2), nextImage(2)

 

Jak chcesz kolejne pola, to muszą mieć numerki 3, 4 itd. Zmieniasz tylko ilość pól. Kod jest uniwersalny na dowolną ilość takich pól.

 

Pamiętaj jednak, aby każdy z nich zmienić na starcie:

<body onLoad="javascript:changeImage(1);changeImage(2)">

Czyli po średniku dodajesz wywołanie zmiany dla każdego kolejnego pola. Dla 3 będzie:

<body onLoad="javascript:changeImage(1);changeImage(2);changeImage(3)">

Itp, itd. ;]

[Mark18]

Wielkie dzieki

 

dzisiaj sie pobawie z tym i dam znac jak poszło.

 

 

jeszcze raz wielkie dzieki.

 

@Edit: Działa wysmienicie:)

 

 

pozdro

Edytowane 19 Marca 2010 przez Mark18