Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS + XHTML + CSS] Zmiana obrazków bez ...
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
MitS
3.12.2005, 17:19:17
Witam!

Chcm by po kliknięciu w odnośnik zmienić obrazek na inny bez przeładowania strony. Wiem jak zrobić by po kliknięciu w odnośnik zmienić treść akapitu bez przeładowania strony zaś grafiki nie wiem.

Zmiana tekstu bez przeładowywania strony robi sie następująco:
Kod
<style type="text/css"><!--
div.menu p { display: none; }
--></style>

<div class="menu">
<p id="m0">Najedź na odnośnik</p>
<p id="m1">
Pierwsze menu widoczne po kliknięciu w odnośnik "menu 1"
</p>
<p id="m2">
Drugie menu widoczne po kliknięciu w odnośnik "menu 2"
</p>
<p id="m3">
Trzecie menu widoczne po kliknięciu w odnośnik "menu 3"
</p>
</div>

<a href="#" onclick="menu('m1'); return false;">menu 1</a>
<a href="#" onclick="menu('m2'); return false;">menu 2</a>
<a href="#" onclick="menu('m3'); return false;">menu 3</a>
<a href="#" onclick="menu('m0'); return false;">czyść</a>

<script language="javascript" type="text/javascript">
<!--
function menu(element) {
i = 0;
while (e = document.getElementById("m" + i++)) {
   e.style.display = "none";
}
document.getElementById(element).style.display = "inline";
}
menu('m0');
// -->
</script>


a jak zrobić z obrazkiem (np. mam 4 obrazki i klikając w odnośnik nr. 1 pokazywał sie obrazek 1.jpg, w odnośnik nr. 2 pokazywał się obrazek o nazwie 2.jpg w miejscu poprzednika itd.) questionmark.gif?

próbowałem też tak:
Kod
function cos( id, url )
{
      document.getElementById( id ).src = url;
}
shpyo
3.12.2005, 17:33:12
Kod
document.getElementById(element).src = "adres_pliku_z_grafika";

a tak próbowałeś?
ounc
3.12.2005, 23:10:46
Podam dosc prymitywny sposob:
[HTML] pobierz, plaintext 
  1. <script language="JavaScript">
  2. function Rysunek(nr) 
  3. { 
  4. if (nr==0) {Nowy="1.jpg"}; 
  5. if (nr==1) {Nowy="2.jpg"}; 
  6. if (nr==2) {Nowy="3.jpg"}; 
  7. if (nr==3) {Nowy="4.jpg"}; 
  8. document.Obrazek.src=Nowy 
  9. } 
  10. </script>
  11. <IMG SRC="1.jpg" NAME="Obrazek">
  12. <br>
  13. <a href="JavaScript:onClick=Rysunek(0)"> <img src="1-m.jpg"</img> </a>
  14. <a href="JavaScript:onClick=Rysunek(1)"> <img src="2-m.jpg"</img> </a>
  15. <a href="JavaScript:onClick=Rysunek(2)"> <img src="3-m.jpg"</img> </a>
  16. <a href="JavaScript:onClick=Rysunek(3)"> <img src="4-m.jpg"</img> </a>
[HTML] pobierz, plaintext
MitS
4.12.2005, 09:34:07
ok może źle się wyraziłem ... smile.gif
To jeszcze raz...

Tu jest przykład jak to ma wyglądać:


I tak:
* jest menu [ 1 ] [ 2 ] [ 3 ] [ 4 ]
* jest obrazek (początkowy numer to "obrazek numer 1")
* jest opis (początkowy opis to "opis numer 1")

Chcem by po kliknięciu np. [ 1 ] pojawił się "obrazek numer 1" i "tekst numer 1" i jak się naciśnie obrazek to on sie powiększa do swoich oryginalnych wymiarów.
Dalej jak nacisne [ 2 ] to pojawia sie "obrazek numer 2" i " tekst numer 2" i tak samo, gdy naciśnie sie na obrazek to on sie powieksza do oryginalnych rozmiarów.
itd. ...

Myśle że teraz wszystko jasno opisałem smile.gif
Pozdrawiam i czekam na pomoc
Voult
4.12.2005, 15:11:21
A spróbuj dać tak:
Kod
<style type="text/css"><!--
div.menu p { display: none; }
--></style>

<div class="menu">
<p id="m0">Najedź na odnośnik</p>
<p id="m1">
Pierwsze menu widoczne po kliknięciu w odnośnik "menu 1"
</p>
<p id="m2">
Drugie menu widoczne po kliknięciu w odnośnik "menu 2"
</p>
<p id="m3">
Trzecie menu widoczne po kliknięciu w odnośnik "menu 3"
</p>
</div>

<div class="obraz">
<p id="ob0"><img src="obrazek1" alt="" /></p>
<p id="ob1">
<img src="obrazek1" alt="" />
</p>
<p id="ob2">
<img src="obrazek2" alt="" />
</p>
<p id="ob3">
<img src="obrazek3" alt="" />
</p>
</div>

<a href="#" onclick="menu('m1'); obraz('m1');return false;">menu 1</a>
<a href="#" onclick="menu('m2'); obraz('m2');return false;">menu 2</a>
<a href="#" onclick="menu('m3'); obraz('m3');return false;">menu 3</a>
<a href="#" onclick="menu('m0'); obraz('m0');return false;">czyść</a>

<script language="javascript" type="text/javascript">
<!--
function menu(element) {
i = 0;
while (e = document.getElementById("m" + i++)) {
  e.style.display = "none";
}
document.getElementById(element).style.display = "inline";
}
menu('m0');




function obraz(element) {
i = 0;
while (e = document.getElementById("ob" + i++)) {
  e.style.display = "none";
}
document.getElementById(element).style.display = "inline";
}
obraz('ob0');
// -->
</script>


spróbuj tak lub coś w tym stylu ... ale za nic nie ręcze
MitS
4.12.2005, 15:54:16
Nie działa sad.gif
Pomóżcie mi ...
revyag
5.12.2005, 10:30:45
Można łatwiej smile.gif
Robisz tak:
Kod
<script type="text/javascript">
function menu(num) {
    
    var opisy = new Array("Opis pierwszy","Opis drugi","Opis trzeci","Opis czwarty" );
    
    document.getElementById("opisy").innerHTML = opisy[num];
    document.getElementById("obrazek").src="img/img_"+num+".png";

    document.getElementById("obrazek").onclick=
    function(){
        window.open('img/img_'+num+'_big.png','','300,300');
    }
}
</script>

[HTML] pobierz, plaintext 
  1. <div class="menu">
  2.     <span id="opisy">Opis pierwszy</span>
  3.     <img id="obrazek" src="img/img_0.png" alt="" onclick="window.open('img/img_0_big.png','','300,300')" />
  4. </div>
  5. <a href="#" onclick="menu(0)">menu 1</a>
  6. <a href="#" onclick="menu(1)">menu 2</a>
  7. <a href="#" onclick="menu(2)">menu 3</a>
[HTML] pobierz, plaintext


Opis:
Nazywasz obrazki odpowiednio img_0.png, img_1.png, ... itd., przy powiększonych analogicznie z tym że dodajesz jeszcze słowo big smile.gif, img_0_big.png, img_1_big.png.
Wtedy można łatwo to obskryptować smile.gif
Obrazki powiększone otwierają się w nowym oknie. Rozmiary sobie ustaw jakie chesz w window.open.
Opisy wsadzasz do tablicy w js, odpada Ci zabawa w pokazywanie/ukrywanie elementów.
Oczywiście trzeba by to jakoś ładnie sformatowac smile.gif Ale to już zostawiam Tobie.
MitS
5.12.2005, 19:05:41
ok dzięki ... troche pozmieniam i powinno ruszyć biggrin.gif
kasior
20.12.2005, 15:16:52
Podam dosc prymitywny sposob:
[HTML] pobierz, plaintext 
  1. <script language="JavaScript">
  2. function Rysunek(nr) 
  3. { 
  4. if (nr==0) {Nowy="1.jpg"}; 
  5. if (nr==1) {Nowy="2.jpg"}; 
  6. if (nr==2) {Nowy="3.jpg"}; 
  7. if (nr==3) {Nowy="4.jpg"}; 
  8. document.Obrazek.src=Nowy 
  9. } 
  10. </script>
  11. <IMG SRC="1.jpg" NAME="Obrazek">
  12. <br>
  13. <a href="JavaScript:onClick=Rysunek(0)"> <img src="1-m.jpg"</img> </a>
  14. <a href="JavaScript:onClick=Rysunek(1)"> <img src="2-m.jpg"</img> </a>
  15. <a href="JavaScript:onClick=Rysunek(2)"> <img src="3-m.jpg"</img> </a>
  16. <a href="JavaScript:onClick=Rysunek(3)"> <img src="4-m.jpg"</img> </a>
[HTML] pobierz, plaintext

Mam pytanko. Zrobiłem podobny skrypt:



function zmien(nr)
{
switch (nr)
{
case 0:
document.images["Galeria"].src = "../graphic/przyk1.gif";
break;
case 1:
document.images["Galeria"].src = "../graphic/przyk2.gif";
break;
case 2:
document.images["Galeria"].src = "../graphic/przyk3.gif";
break;
}
}


i chciałbym aby obrazki były pobrane z bazy.

zrobiłem więc coś takiego :


function zmien(nr)
{
switch (nr)
{
case 0:
document.images["Galeria"].src = "<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name']); ?>";
break;
case 1:
document.images["Galeria"].src = "<?php echo tep_image(DIR_WS_IMAGES . $products['products_subimage1'], $products['products_name']); ?>";
break;
case 2:
document.images["Galeria"].src = "<?php echo tep_image(DIR_WS_IMAGES . $products['products_subimage2'], $products['products_name']); ?>";
break;
}
}

Tak samo zamieniłem wywołanie:

<IMG NAME="Galeria" SRC= "<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name']); ?>"><BR><br>

<A HREF="java script: zmien(0)"><?php echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); ?></A>&nbsp;&nbsp;

<A HREF="java script: zmien(1)"><?php echo tep_image(DIR_WS_IMAGES . $products['products_subimage1'], $products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); ?></A>&nbsp;&nbsp;

<A HREF="java script: zmien(2)"><?php echo tep_image(DIR_WS_IMAGES . $products['products_subimage2'], $products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); ?></A>&nbsp;&nbsp;



I wszystko byłoby git, gdyby nie to,że tam gdzie jest SRC to nie działa. Wyświetlają się miniaturkipod głównym obrazkiem,ale głowny nie i przełączanie też nie działa. Czy to trzeba inaczej złożyć do kupy? Jakie błędy zrobiłem? Może ktoś pomoże.
revyag
20.12.2005, 15:30:48
A powiedz w jaki sposób zmusisz javascript zeby wykonalo kod php ?
kasior
20.12.2005, 15:43:38
No właśnie nie wiem. Właściwie jest to niemożliwe. Tak naprawdę szukam metody,aby wyświetlać obrazki bez odświeżania strony (z przeładowaniem to nie ma problemu) , ale ładowane z bazy. Coś takiego jak tu:

http://www.ultima.pl/itemnfo.php?id=2969 - kliknij na jakiś screen

Oni mają też podobny skrypt i nie chce mi się wirzyć,żeby z bazy tego nie wyciągali.
Zajec
20.12.2005, 15:47:48
Kod
function obrazek(id, adres)
{
document.getElementById(id).src=adres;
}


<img src="zolty.jpeg" alt="produkt" id="podglad" />
<a href="java script:obrazek('podglad', 'niebieski.jpeg')">obrazek 1</a>

Zamiast niebieski.jpeg wpisujesz coś za pomocą php dla każdego linka.
kasior
20.12.2005, 16:10:47
No dobra. Tyle,że w miejscu zolty.jpg też musi być plik z bazy. Zrobiłem tak:

<img src="<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name']); ?>" alt="produkt" id="podglad"> <br>

<a href="java script:obrazek('podglad', '. tep_href_link(DIR_WS_IMAGES . $products['products_subimage1']) .')"><?php echo tep_image(DIR_WS_IMAGES . $products['products_subimage1'], $products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); ?></a>

No i klapa. Może by działalo bo link pokazuje dobry, ale główny obrazek się nie wyświetla. Przyklad zastosowania jest tu: http://www.pphu-motor.pl/sklep/product_inf...roducts_id=3519
trzeba kliknąć w miniature.

I co dalej rolleyes.gif
SHiP
20.12.2005, 17:13:31
Jeśli to ma być nazwa pliku wyciągnięta z bazy danych to najlepiej użyć AJAXA ;] lub najpierw zincludowac za pomoca JS plik wygenerowany przez php zawierający tablice ze wszystkimi nazwami plikow a później za pomocą Math.radom losować jeden lub brać kolejne...
kasior
20.12.2005, 17:20:28
No i wykombinowałem sobie w taki sposób:

Cytat
<script language="JavaScript">
function obrazek(id, adres)
{
document.getElementById(id).src=adres;
}
</script>

<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name'],'','','id="podglad"'); ?>

<a href="java script:obrazek('podglad', '<?php echo tep_href_link(DIR_WS_IMAGES . $products['products_image']); ?>')"><?php echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); ?>


To tak w skrócie. I działa zawodowo smile.gif
Ale dzięki wszystkim za pomoc.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.