Witam, proszę o pomoc w wykonaniu czegoś takiego:
http://scr.hu/7bwz/arzux
Sa 2 divy, w jednym będą zdjecia, po kliknieciu np. na zdjecie pierwsze w drugim divie pokaże się to zdjęcie z dodatkowym opisem poniżej.
Bardzo proszę o pomoc.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="zdjecia"> <img src="https://www.google.com/trends/resources/2327917647-google-icon.png"> <img src="https://www.google.com/trends/resources/2327917647-google-icon.png"> <img src="https://www.google.com/trends/resources/2327917647-google-icon.png"> <img src="https://www.google.com/trends/resources/2327917647-google-icon.png"> </div> <script> document.getElementById("zdjecia").getElementsByTagName("img")[0].onclick=function() { var opis = "Opis do zdjęcia numer 1"; document.getElementById("opis").innerHTML = opis; } document.getElementById("zdjecia").getElementsByTagName("img")[1].onclick=function() { var opis = "Opis do zdjęcia numer 2"; document.getElementById("opis").innerHTML = opis; } document.getElementById("zdjecia").getElementsByTagName("img")[2].onclick=function() { var opis = "Opis do zdjęcia numer 3"; document.getElementById("opis").innerHTML = opis; } document.getElementById("zdjecia").getElementsByTagName("img")[3].onclick=function() { var opis = "Opis do zdjęcia numer 4"; document.getElementById("opis").innerHTML = opis; } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="zdjecia"> <img src="https://www.google.com/trends/resources/2327917647-google-icon.png"> <img src="https://www.google.com/trends/resources/2327917647-google-icon.png"> <img src="https://www.google.com/trends/resources/2327917647-google-icon.png"> <img src="https://www.google.com/trends/resources/2327917647-google-icon.png"> </div> <script> document.getElementById("zdjecia").getElementsByTagName("img")[0].onclick=function() { var opis = "Opis do zdjęcia numer 1"; } document.getElementById("zdjecia").getElementsByTagName("img")[1].onclick=function() { var opis = "Opis do zdjęcia numer 2"; } document.getElementById("zdjecia").getElementsByTagName("img")[2].onclick=function() { var opis = "Opis do zdjęcia numer 3"; } document.getElementById("zdjecia").getElementsByTagName("img")[3].onclick=function() { var opis = "Opis do zdjęcia numer 4"; } </script> </body> </html>
document.getElementById("zdjecia").getElementsByTagName("img")[0].onclick=function() { var opis = "Opis do zdjęcia numer 1"; document.getElementById("opis").innerHTML = opis; } document.getElementById("zdjecia").getElementsByTagName("img")[1].onclick=function() { var opis = "Opis do zdjęcia numer 2"; document.getElementById("opis").innerHTML = opis; } document.getElementById("zdjecia").getElementsByTagName("img")[2].onclick=function() { var opis = "Opis do zdjęcia numer 3"; document.getElementById("opis").innerHTML = opis; } document.getElementById("zdjecia").getElementsByTagName("img")[3].onclick=function() { var opis = "Opis do zdjęcia numer 4"; document.getElementById("opis").innerHTML = opis; }