Databases
StackOverflow2013
Postsdbo
POJQuery set img src depending on where you click
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery set img src depending on where you click
    text
    copied!<p>I used javascript for loading a picture on my website depending on which "small" photos in ul you clicked... I had something like that :</p> <pre><code>&lt;script type="text/javascript"&gt; function viewImage(src, legende) { document.getElementById("imageBig").src = "images/photos/"+src; document.getElementById("legend").innerHTML = legende; } &lt;/script&gt; </code></pre> <p>and in html simply : things like that :</p> <pre><code>&lt;ul id="ulPhotos"&gt; &lt;li&gt; &lt;a href="#centre" onclick="javascript:viewImage('flute.jpg','La Reine de la Nuit au Comedia')"&gt; &lt;img src="images/photos/carre-09.jpg" alt="" /&gt; &lt;/a&gt; &lt;a href="#centre" onclick="javascript:viewImage('perichole.jpg','Manuelita - &lt;em&gt;La P&amp;eacute;richole&lt;/em&gt; &amp;agrave; l&amp;#8217;Op&amp;eacute;ra Comique')"&gt; &lt;img src="images/photos/carre-03.jpg" alt="" /&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#centre" onclick="javascript:viewImage('12.png','R&amp;eacute;cital &amp;agrave; Carnac, septembre 2008')"&gt; &lt;img src="images/photos/carre-12.jpg" alt="Marion Baglan Carnac R&amp;eacute;" /&gt; &lt;/a&gt; &lt;a href="#centre" onclick="javascript:viewImage('01.jpg','')"&gt; &lt;img src="images/photos/carre-01.jpg" alt="" /&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>so you see, I could, depending on which small photos in the unordered list you clicked, load some particular photos, by passing the src string in argument to my viewImage function...</p> <p>but I decided to use Jquery to get some fade-in effect. But I can't find a way to pass an argument that would tell my JQuery function which photo to load depending on where I clicked... </p> <p>stuck here :</p> <pre><code>$(document).ready(function(){ $('#ulPhotos').click(function() { var newSrc = $('#imageBig').attr("src", "images/photos/11.jpg"); }); }); </code></pre> <p>I don't want the 11.jpg to be hardcoded, I need to pass it through argument when I click on a special li element in my ul element of id #ulPhotos...</p> <p>I hope I'm clear enough sorry !</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload