I'm currently in the process of building a movie information page similar to what you see in cinemas, where I pull images and titles from an external source.
The goal of my code is to dynamically highlight the title corresponding to each image when the slideshow transitions, indicating which movie is being displayed. However, I'm struggling with establishing the proper connection between the images and texts.
Any assistance or guidance on this matter would be greatly appreciated. Thank you.
html:
<table align="center">
<tr>
<td>
<!-- slide -->
<div class="slide" style="width: 550px; height: 620px" align="center">
<ul class="home_ul">
<c:forEach var="img" items="${moviedata }" varStatus="no">
<a href="../movielist/MDetail?mid=${img.mid }"><li class="home_li"><img src="../m_img/movie/${img.imgurl}"
alt="" width="500px" height="600px" name="color${no.index }" /></li></a>
</c:forEach>
</ul>
</div>
</td>
<td>
<!-- movielist-->
<div>
<ul class = "mlist">
<c:forEach var="rank" items="${moviedata }" varStatus="no">
<li>
${no.index + 1 }. <a href="../movielist/MDetail?mid=${rank.mid }">${rank.name }</a>
</li>
</c:forEach>
</ul>
</div>
</td>
</tr>
</table>
html Result :
...
CSS:
<style>
.mlist{
list-style:none;
display:flex;
align-content:flex-start;
flex-direction: column;
flex-wrap: wrap;
width: 250px;
text-align: left;
}
.mlist li {
display:inline-block;
border:1px solid black;
border-top: 1px solid black;
width:260px;
height:50px;
margin:3px 0 0;
}
.mlist li:hover {
border:1px solid red; height:50px;
}
</style>
JavaScript:
const all = ele => document.querySelectorAll(ele) ...