Отображение измененного заголовка изображения

-1

Я пытаюсь отобразить заголовок моего изображения прямо под самим изображением. У меня есть событие onClick на изображении, которое меняет название изображения после нажатия на него.Отображение измененного заголовка изображения

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
     onClick Handler 
    </title> 
    <h3 style="text-align:center">onClick Handler</h3> 
</head> 
<body style="text-align:center"> 
    <img src="NukaCola.jpg" title="Nuka Cola" id="id1" height="550" width="350" onClick="this.title='You Clicked!';"/> 
    </br><script> 
     var x=document.getElementById("id1"); 
     document.write(x.title); 
    </script> 
</body> 
</html>

Теперь, я знаю, что это плохая форма использовать document.write(), и это даже не сделать то, что я хочу сделать, потому что я хотел бы, чтобы отобразить новое название изображений после того, как пользователь нажал на изображении. Как я могу это достичь?

источник

2015-09-04 afryingpan

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
     onClick Handler 
    </title> 
    <h3 style="text-align:center">onClick Handler</h3> 
</head> 
<body style="text-align:center"> 
    <img src=NukaCola.jpg title="Nuka Cola" id="id1" height=550 width=350 onClick="updateTitle(this)"/> 
    <p id='id1Text'></p> 
    </br> 
    <script> 
     function updateTitle(img) { 
      img.title = 'You clicked!'; 
      document.getElementById(img.id +'Text').textContent = img.title; 
     } 
    </script> 
</body> 
</html>

источник

2015-09-04 03:40:37

Заметил кое-что: у вас есть тэг h3, объявленный в теге головы.

источник

2015-09-04 03:42:46

Отображение измененного заголовка изображения

ответ

Смежные вопросы