Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: przypisanie jednemu "href" kilku wartosci
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
adeq_PL
5.08.2007, 23:46:56
Witam. Pisze prosta galerie do prezentacji kilku zdjec. Sklada sie ona z 4 miniatur i jednego duzego okna wyswietlajacego powiekszone fotki. Problem zmiany powiekszonych zdjec rozwiazalem astepujaco:

[HTML] pobierz, plaintext 
  1. <form name="galeria">
  2.                           <table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
  3.                             <tr>
  4.                             <td width="80%" align="center">
  5.  
  6.                                <a href="" ><img name="duzy" src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo$row1->picture;?>" width="450" /></a>
  7.  
  8.                             </td>
  9.  
  10.                             <?php
  11.                             if($row1->picture==""&&$row1->pictureb==""&&$row1->picturec==""&&$row1->pictured==""){
  12.  
  13.                             }else{
  14.  
  15.                                    echo "<td width=\"20%\" align=\"center\" valign=\"top\">
  16.                                    <p align=\"center\">";
  17.  
  18.                                    if($row1->picture==""){
  19.                                    }else{
  20.                                    ?>
  21.                                    <img src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->picture; ?>" border=1 hspace=4 vspace=4 width=90 onclick="Wybierz('<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->picture; ?>')"><br>
  22.                                    <?php
  23.                                    }
  24.                                    if($row1->pictureb==""){
  25.                                    }else{
  26.                                    ?>
  27.                                    <img src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->pictureb; ?>" border=1 hspace=4 vspace=4 width=90 onclick="Wybierz('<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->pictureb; ?>')"><br>
  28.                                    <?php
  29.                                    }
  30.                                    if($row1->picturec==""){
  31.                                    }else{
  32.                                    ?>
  33.                                    <img src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->picturec; ?>" border=1 hspace=4 vspace=4 width=90 onclick="Wybierz('<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->picturec; ?>')"><br>
  34.                                    <?php
  35.                                    }
  36.                                    if($row1->pictured==""){
  37.                                    }else{
  38.                                    ?>
  39.                                    <img src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->pictured; ?>" border=1 hspace=4 vspace=4 width=90 onclick="Wybierz('<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->pictured; ?>')""><br>
  40.                                    <?php
  41.                                    }
  42.  
  43.                                    echo "</p>
  44.                                    </td>";
  45.                                    }
  46.                                    ?>
  47.                             </tr>
  48.                      </table>
  49.                   </form> 
  50.  
  51.                    <script>
  52.                       function Wybierz(src){
  53.                           document.galeria.duzy.src=src;
  54.  
  55.                       }
  56.                    </script>
[HTML] pobierz, plaintext


Moj problem polega na tym ze chcialbym zeby powiekszone fotki wyswietlaly sie w swoich naturalych rozmiarach. Mialo by to nastepowac po nacisnieciu na powiekszona fotke. Problem w tym ze nie wiem jak mam ustawic parametr href (musi on miec taka sama wartosc jak src).

Moje pytanie czy mozliwe jest aby to zrobic w js? Jesli tak to w jaki sposob? Ewentualnie prosze o inne rozwiazania.

Z gory dzieki i pozdrawiam.
Cezar708
6.08.2007, 08:38:24
tak samo, po prostu zmodyfikuj swoją funkcje oraz część <a>, popatrz:

Kod
// twoja javascript
function Wybierz(src){
  document.galeria.duzy.src=src;
  document.getElementById('odnosnikDoPelnychRozmiarow').href=src;
}


potem w samym html zmień:

[HTML] pobierz, plaintext 
  1. <a href="" >
  2.   <img 
  3.     name="duzy" 
  4.     src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo$row1->picture;?>" 
  5.    width="450" />
  6. </a>
[HTML] pobierz, plaintext


na 
[HTML] pobierz, plaintext 
  1. <a 
  2.   href='<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo$row1->picture;?>' 
  3.   id='odnosnikDoPelnychRozmiarow'
  4. >
  5.   <img 
  6.     name='duzy' 
  7.     src='<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo$row1->picture;?>'
  8.    width='450'
  9.   />
  10. </a>
[HTML] pobierz, plaintext


powinno zadzialać

PS: nie pasuje mi jeszcze to width='450'... wg mnie rozjeżdżać Ci się będzie obrazek, skoro jest ten sam url do obrazka.
adeq_PL
8.08.2007, 13:42:45
Witam. Dzieki za rade oczywiscie wszystko chodzi super i zastosuje ta metode. Ja wczesniej jednak zastosowalem cos takiego:

[HTML] pobierz, plaintext 
  1. <table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
  2.                             <tr>
  3.                             <td width="80%" align="center">
  4.  
  5.                               <div id="id1" >
  6.                                     <a href="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->picture; ?>"
  7.               rel="lightbox"><img border="0" name="duzy" src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->picture; ?>" width="450"/></a>
  8.                               </div>
  9.                               <div id="id2" style="display:none">
  10.                                     <a href="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->pictureb; ?>" rel="lightbox"><img border="0" name="duzy" src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->pictureb; ?>" width="450"/></a>
  11.                               </div>
  12.                               <div id="id3" style="display:none">
  13.                                     <a href="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->picturec; ?>" rel="lightbox"><img border="0" name="duzy" src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->picturec; ?>" width="450"/></a>
  14.                               </div>
  15.                               <div id="id4" style="display:none">
  16.                                     <a href="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->pictured; ?>" rel="lightbox"><img border="0" name="duzy" src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->pictured; ?>" width="450"/></a>
  17.                               </div>
  18.                            <!--<a name="duzy1" border="0" href="" rel="lightbox"></a>-->
  19.                             </td>
  20.                             <?php
  21.                             if($row1->pictureb==""&&$row1->picturec==""&&$row1->pictured==""){
  22.  
  23.                             }else{
  24.  
  25.                                    echo "<td width=\"20%\" align=\"center\" valign=\"top\">
  26.                                    <p align=\"center\">";
  27.  
  28.                                    if($row1->picture==""){
  29.                                    }else{
  30.                                    ?>
  31.                                    <img src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->picture; ?>" border=1 hspace=4 vspace=4 width=90 onclick="Wybierz('1')"><br>
  32.                                    <?php
  33.                                    }
  34.                                    if($row1->pictureb==""){
  35.                                    }else{
  36.                                    ?>
  37.                                    <img src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->pictureb; ?>" border=1 hspace=4 vspace=4 width=90 onclick="Wybierz('2')"><br>
  38.                                    <?php
  39.                                    }
  40.                                    if($row1->picturec==""){
  41.                                    }else{
  42.                                    ?>
  43.                                    <img src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->picturec; ?>" border=1 hspace=4 vspace=4 width=90 onclick="Wybierz('3')"><br>
  44.                                    <?php
  45.                                    }
  46.                                    if($row1->pictured==""){
  47.                                    }else{
  48.                                    ?>
  49.                                    <img src="<?php echo $mosConfig_live_site; ?>/images/stories/<?php echo $row1->pictured; ?>" border=1 hspace=4 vspace=4 width=90 onclick="Wybierz('4')""><br>
  50.                                    <?php
  51.                                    }
  52.  
  53.                                    echo "</p>
  54.                                    </td>";
  55.                                    }
  56.                                    ?>
  57.                             </tr>
  58.                      </table>
  59.  
  60.                    <script>
  61.                       function Wybierz(src){
  62.                         if(src=='1'){
  63.                          obj=document.getElementById('id1');
  64.                          obj.style.display="";
  65.                          obj=document.getElementById('id2');
  66.                          obj.style.display="none";
  67.                          obj=document.getElementById('id3');
  68.                          obj.style.display="none";
  69.                          obj=document.getElementById('id4');
  70.                          obj.style.display="none";
  71.                         }
  72.                         else if(src=='2'){
  73.                          obj=document.getElementById('id1');
  74.                          obj.style.display="none";
  75.                          obj=document.getElementById('id2');
  76.                          obj.style.display="";
  77.                          obj=document.getElementById('id3');
  78.                          obj.style.display="none";
  79.                          obj=document.getElementById('id4');
  80.                          obj.style.display="none";
  81.                         }
  82.                         else if(src=='3'){
  83.                          obj=document.getElementById('id1');
  84.                          obj.style.display="none";
  85.                          obj=document.getElementById('id2');
  86.                          obj.style.display="none";
  87.                          obj=document.getElementById('id3');
  88.                          obj.style.display="";
  89.                          obj=document.getElementById('id4');
  90.                          obj.style.display="none";
  91.                         }
  92.                         else if(src=='4'){
  93.                          obj=document.getElementById('id1');
  94.                          obj.style.display="none";
  95.                          obj=document.getElementById('id2');
  96.                          obj.style.display="none";
  97.                          obj=document.getElementById('id3');
  98.                          obj.style.display="none";
  99.                          obj=document.getElementById('id4');
  100.                          obj.style.display="";
  101.                         }
  102.  
  103.                       }
  104.                    </script>
[HTML] pobierz, plaintext


Tez dziala tak jak chcialem, ale mysle ze nie jest to zbyt dobry sposob. Co myslicie?
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.