patchworks101

Hi Could you not also use the CSS TOOLTIP function ?

Hi I'm hoping someone may be able to spot something I'm missing. I have a page ART86 gallery that has 9 lines of thumbnail images that, using JS onClick opens a modal with the enlarges image displayed. All works fine for the first 4 lines of images but, from line 5 onwards, the second image only displays the cursor pointer part-way across the image with the normal arrow cursor for the remainder and the rest of the thumbnails don't display the pointer at all. Consequently, none of those displaying only the arrow cursor will not operate the onClick command. I'm using a straight crib from the W3 code at the moment so I haven't tweaked anything to cause this. The code is below and I hpe someone will be able to point me (no pun intended) where the error is. <div id="images" style="max-width:1000px; position: relative;left: auto;top: 350px;"> <img src="images/caucheteux/sculpture/20190801_183839_mod.jpg" alt="bonsai" id="myImg" style="width:150px;height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/au-carre.JPG" alt="au-carre" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/angelus.jpg" alt="angelus" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/bambou-la.JPG" alt="bambou la" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/bamboula.JPG" alt="bamboula" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/cafe-theatre-du-lac.jpg" alt="cafe theatre du lac" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/cradeau-au-bambou.JPG" alt="cradeau au bambou" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/derniere-sculpture-001.JPG" alt="le golfe" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/DSC04292.JPG" alt="assortement 1" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/DSC04308.JPG" alt="le vane" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/extracteur-et-sculpteur-008.JPG" alt="extracteur" id="myImg" style="width:150px;height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/galletjade.JPG" alt="gallet jade" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/incertitude.JPG" alt="incertitude" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/je-compose.JPG" alt="je compose" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/je-suis.JPG" alt="je suis" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/la-flamme.JPG" alt="la flamme" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/lampe-dans-la-nuit.jpg" alt="lampe dans la nuit" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/la-pagode.JPG" alt="la pagode" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/l-arc-en-ciel.JPG" alt="l'arc en ciel" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/l-artiste-au-travail.JPG" alt="l'artiste au travail" id="myImg" style="width:150px; height:auto; cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-baise.jpg" alt="le baise" id="myImg" style="width:150px;height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-chat.jpg" alt="le chat" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-chat-qui-lie.jpg" alt="le chat qui lie" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/l-ecritoire.JPG" alt="l'ecritoire" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-lezard.JPG" alt="le lezard" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-papillon.JPG" alt="le papillon" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/les-perles.JPG" alt="les perles" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-temps.JPG" alt="les temps" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/le-temps-pas.JPG" alt="les temps pas" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/lip.jpg" alt="lip" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/magie.jpg" alt="magie" id="myImg" style="width:150px;height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/moment-de-detente.jpg" alt="moment de detente" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/mon-porteur-d-eau.JPG" alt="mon porteur d'eau" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/nenuphare-musicale-002.JPG" alt="nenuphare musicale" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/nous-deux.jpg" alt="nous deux" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/parents-013.JPG" alt="parents" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/pelotte-basque.jpg" alt="pelotte basque" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/poupee-russe.JPG" alt="poupee russe" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/roulade.jpg" alt="roulade" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/saturne.JPG" alt="saturne" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/sculptures-d-alain-003.JPG" alt="sulptures 003" id="myImg" style="width:150px;height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/sculptures-d-alain-004.JPG" alt="sculptures 004" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/sculpture-volauvent-001.JPG" alt="sculpture volauvent" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/sorciere-004.JPG" alt="sorciere" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/tendance.jpg" alt="tendance" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/tete-de-cheval.JPG" alt="tete de cheval" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/tulippes.JPG" alt="tulippes" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/un-tronc.jpg" alt="un tronc" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/un-vigne-de-toi.jpg" alt="un vigne de toi" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/volauvent30.JPG" alt="volauvent" id="myImg" style="width:150px; height:auto;cursor:pointer" onclick="onClick(this)"> <img src="images/caucheteux/sculpture/vue-du-ciel.jpg"alt="vue de ciel" id="myImg" style="width:150px;height:auto;cursor:pointer" onclick="onClick(this)"> </div> <div id="modal01" class="w3-modal" onclick="this.style.display='none'"> <span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span> <div class="w3-modal-content w3-animate-zoom"> <img id="img01" style="width:100%"> </div> </div> <script> function onClick(element) { document.getElementById("img01").src = element.src; document.getElementById("modal01").style.display = "block"; } </script> Thanks in advance.