1 reply [Last post]
jcrmontemayor20
jcrmontemayor20's picture
Offline
newbie
Last seen: 6 years 31 weeks ago
Timezone: GMT+8
Joined: 2016-08-14
Posts: 1
Points: 2

Ok, so let me describe the goal first. I am making a birthday page for my best friend. I asked some of her other close friends to give a message, birthday greeting, etc., for her which I will post/display on the website. My plan was to insert a picture of let's say "friend A". And then when viewing the webpage, when the viewer hovers over "friend A"'s picture, a corresponding "text box" (idk the correct term) appears over the picture of "friend A" containing that person's message for the celebrant. I want to implement this if possible, all in HTML5 and CSS3. I have totally no idea how to write the code for this task. Any help would be appreciated.

P.S. If that task is possible, would the code also work if let's say, she views the page on a touchscreen device? Would the "text box" still appear if she touches the image of "friend A"?

Thanks

ramcom
ramcom's picture
Offline
Regular
Belgium
Last seen: 6 years 25 weeks ago
Belgium
Timezone: GMT+2
Joined: 2016-09-28
Posts: 13
Points: 13

hello jcrmontemayor20 you

hello jcrmontemayor20

you can do this by javascript and css

 <html>
<body>
 
<p id="p1">Hello World!</p>
 
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
 
</body>
</html>