There are various websites that display captions on images in paragraphs, h1 tags, or contained within a div along with the image.
I am interested in learning how to determine if an image has an associated caption using JavaScript, especially when the caption is directly on the image and takes up space.
The examples provided below showcase different methods of adding captions to images. Is there a universal way to identify whether a caption exists?
<figure>
<img src="http://images.all-free-download.com/images/wallpapers_large/small_island_wallpaper_beaches_nature_wallpaper_1388.jpg" alt="Tea cup with steam and pen on bed">
<figcaption>Journaling with Tea</figcaption>
</figure><div class="image">
<img src="http://images.all-free-download.com/images/wallpapers_large/small_island_wallpaper_beaches_nature_wallpaper_1388.jpg" alt="Tea cup with steam and pen on bed">
<p>Journaling with Tea</p>
</div><!DOCTYPE html>
<html >
<head>
<style type="text/css>
.imageHolder {
position: relative;
width: 285px;
height: 175px;
}
.imageHolder .caption {
position: absolute;
width: 283px;
height: 50px;
bottom: 0px;
left: 0px;
color: #ffffff;
background: green;
text-align: center;
font-weight: bold;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="imageHolder">
<img src="http://images.all-free-download.com/images/wallpapers_large/small_island_wallpaper_beaches_nature_wallpaper_1388.jpg" alt="" />
<div class="caption">
<br>Caption goes here
</div>
</div>
</body>
</html>