For days, I have been attempting to create 5 anchored image rollovers for my website's navigation menu without achieving 100% success. After going through numerous tutorials, some recommending JavaScript and others CSS, I am still facing issues. The main problem is that when I create a functional image rollover and position it using CSS, the position does not adjust proportionally with the other images, resulting in them losing the "glued to the background" effect when resizing the browser window. My goal is to have all images, including the rollovers, maintain this effect.
Currently, the closest I have come to the desired effect works partially in Firefox, where the rollover only functions when hovering over the top 25% of the image, and the "glued to the background" effect is absent. In Chrome, the anchored rollover image works properly, but the background effect does not. Below is the code snippet:
#news{
position:relative;
left:180px;
bottom:450px;
width:210px;
height:67px;
}
<div id="news" align="center">
<a href="news.html"
onmouseover="document.news.src='newsRO.png'"
onmouseout="document.news.src='news.png'">
<img src="news.png" name="news" width="210px" height="67"/>
</a>
</div>
You can view a live example here. There are other elements on the site that require positioning and content development, but once I can get the menu to function correctly, I should be able to address these issues.
I would greatly appreciate any insights or advice. Thank you!