Jump to content

Mouseover Images?


Recommended Posts

I received a PM from MSousa asking about this approach....


To me it seems a bit strange and I would be interested in other opinions.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>hover title</title><style>#over{width:200px;}#over ~ h3.title{display:none;background-color:white;padding:0 5px;border-radius:3px;position: relative;top:-10px;left:-240px;}#over:hover{width:400px;}#over:hover ~ h3.title{display:inline;}</style></head><body><img id="over" src="http://www.stlnetwork.net/test/img/wt_c.jpg" onMouseOver="this.src='http://www.stlnetwork.net/test/img/wt_t.jpg'" onMouseOut="this.src='http://www.stlnetwork.net/test/img/wt_c.jpg'" /><h3 class="title">text title</h3><p>This seems like a goofy approach</p><div id="out1"></div></body>    </html>
Link to comment
Share on other sites

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title>hover title</title>        <style>            .title {display:inline-block; position:relative; margin:0;}            .title:first-child img {width:200px;}            .title:first-child img + img{display:none;}            .title:hover:first-child img {display:none;}            .title:hover:first-child img + img {display:block;width:400px;}            .title span{text-align: center; position: absolute; bottom:0.5em; display: none; left: 0; right:0;}            .title span b {background-color:white; padding:0 5px; border-radius:3px;}            .title:hover span{display: block;}        </style>    </head>    <body>        <h3 class="title"><img src="http://www.stlnetwork.net/test/img/wt_c.jpg" alt=""><img src="http://www.stlnetwork.net/test/img/wt_t.jpg" alt=""><span><b>text title</b></span></h3>        <p>This seems like a better approach</p>        <div id="out1">        </div>    </body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...