Rollover Question

HTML & CSS
1

Hello,

Here is the link to site I’m currently working on, its not that far at the moment but had a question to see if somebody here can let me know if what I’m trying to achieve can be done with HTML and CSS.

Superior Medical - live like new

For examply what I want is say when you rollover the h2 word “Our company” in yellow that maybe a speech bubble popups next to the figure illustration, either that or the picture changes to a image with a speech bubble next to a figure so like loads in a new image. Is this possible with HTML and CSS and if so, could you please direct me in the right direction on how to achieve this or is it something that needs jQuery and if so would anyone know of some jQuery which may be out there that I can use to achieve this effect.

Thanks

Mike

2

Hi,
You don’t have to use jQuery or any other javascript for that. It’s just a simple disjointed rollover.

Disjointed Rollover

View the page source for details on setting up the html/css for it.

Basically you will be wrapping an anchor around your current H2 text and then nesting a <span> within the anchor too. That span gets set as position:absolute; and it contains the content of your tolltip/speech bubble.

You need to set the H2 as position:relative; so it becomes the containing block for the AP span.

The same method is being used in this old Map Hotspot Demo

EDIT:
About the anchor, that is really only needed for IE6 since it only supports :hover on anchors. If you are not concerned about that browser you could use a span only and make it pop up on h2:hover

3

Here is your page with the appropriate script to show the box on mouseover. I have used the anchor description as the “message”, but you can change this to meet your own needs. You might also need to review your style sheet in case there are any clashes with the styles I have set.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Superior Medical - live like new</title>
<script type=“text/javascript”>
<!–
var msgObj; // global
window.onload=function(){
// global shortcut to object
msgObj=document.getElementById(“msgR”);
// get collection of <a> tags
var ulElem=document.getElementById(“navig”);
var allA=ulElem.getElementsByTagName(“a”);
// add mouse handlers
var i;
for(i=0; i<allA.length; i++)
{ allA[i].onmouseover=function(){
msgObj.innerHTML=this.innerHTML; msgObj.style.visibility=“visible”; }
//
allA[i].onmouseout=function(){
msgObj.innerHTML=“”; msgObj.style.visibility=“hidden”; }
}
}
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; font-weight:normal; color:#000; font-size:13px; background-color:#FFF; }
#navig a:link, #navig a:visited { font-size:14px; font-weight:bold; color:#00F; text-decoration:underline; }
#navig a:hover { color:#F00; }
#navig li { margin-top:0px; margin-bottom:5px; list-style-type:circle; }
#nav { position:relative; top:0px; left:0px; overflow:hidden; }
#msgR { position:absolute; visibility:hidden; top:10px; left:150px; width:200px; height:50px; padding:10px; text-align:center; border:3px solid #0FF; }
.a18B { font-size:18px; font-weight: bold; color:#F00; }
–>
</style>
</head>

<body>

<div id=“wrapper”>
<div id=“header”>
<div id=“logo”>
<a href=“http://www.livelikenew.com”><img src=“images/logo.jpg” /></a>
</div>
<!-- logo –>
<div id=“nav”>
<ul id=“navig”>
<li><a href=“index.html”>Our company</a></li>
<li><a href=“services.html”>Services</a></li>
<li><a href=“products.html”>Products</a></li>
<li><a href=“resources.html”>Resources</a></li>
<li><a href=“partners.html”>Partners</a></li>
<li><a href=“contact.html”>Contact us</a></li>
</ul>
<div id=“msgR” class=“a18B”>
</div>
<!-- end msgR –>
</div>
<!-- nav –>
</div>
<!-- header –>
<div id=“content”>
<h2>Our company</h2>
<p>Superior Medical is known for the support which we provide.<br />
We want to become the highest recommended supplier of high-quality custom
and non-custom medical equipment and supplies.
</div>
<!-- content –>
<div id=“figure”>
<img src=“images/figure-home.png” />
</div>
</div>
<!-- wrapper –>

</body>

</html>

</html>

4

Thanks alot guys,

I decided to go Rayzurs route but am getting some issue in Safari and Google Chrome, havent checked it in IE, check these links out and let me know what I can do to fix it so it looks like it does in FireFox.

Superior Medical - live like new

Superior Medical - live like new

Thanks,

Mike

5

Hi,

You have several problems with the way you have set up your html.

Here is what you have:

<div id="content-wide">
[COLOR=Red]<h2>Resources</h2>[/COLOR]
<div id="col-left">
<p class="boa">[COLOR=Red]<a href="#"><h1>BOA Dual [TLSO Bracing]</h1><span><p class="tip"></p></span></a>[/COLOR]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/><br/>

<p class="ossur">[COLOR=Red]<a href="#"><h1>OSSUR [TLSO Bracing]</h1><span><p class="tip"></p></span></a>[/COLOR]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/><br/>
</p>
</div><!-- col-left -->

<div id="col-right">
<p class="spinalux"><a href="#"><h1>SpinaLux [TLSO Bracing]</h1><span><p class="tip"></p></span></a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/><br/>

<p class="ace"><a href="#"><h1>Ace Brace [Hyper Extension Bracing]</h1><span><p class="tip"></p></span></a>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/><br/>
</p>
</div><!-- col-left -->

</div><!-- content -->

For starters you have your heading structures set up wrong, You have an H2 that is leading into multiple H1’s. It needs to be the other way around: One H1 leading into multiple H2’s.

You can’t nest block level headings inside of a span or any other inline element. You have it backwards, the anchor needs to nest inside what should be the H2. Then the span gets nested within that. Then the paragraphs should follow the H2, you were trying to nest the headings in your paragraphs.

There are other errors as well, missing closing </p> tags etc. Firefox was probably just correcting those things for you.

Your html should be set up something like this and then adjust the CSS accordingly:

<div id="content-wide">
    [COLOR=Blue]<h1>Resources</h1>[/COLOR]
    [B]<div id="col-left">[/B]
        [COLOR=DarkGreen]<h2 class="boa">[/COLOR][COLOR=Blue]<a href="#">BOA Dual [TLSO Bracing]<span class="tip"></span></a>[/COLOR][COLOR=DarkGreen]</h2>[/COLOR]
        [COLOR=Blue]<p>[/COLOR]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[COLOR=Blue]</p>[/COLOR]
        [COLOR=DarkGreen]<h2 class="ossur">[/COLOR][COLOR=Blue]<a href="#">OSSUR [TLSO Bracing]<span class="tip"></span></a>[/COLOR][COLOR=DarkGreen]</h2>[/COLOR]
        [COLOR=Blue]<p>[/COLOR]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[COLOR=Blue]</p>[/COLOR]
    [B]</div>[/B]
    <div id="col-right">
        <h2 class="spinalux"><a href="#">SpinaLux [TLSO Bracing]<span class="tip"></span></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <h2 class="ace"><a href="#">Ace Brace [Hyper Extension Bracing]<span class="tip"></span></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div><!-- content -->

You should be able to eliminate the classes on those spans too.
Just target the spans by their parent H2.

It looks like those H2’s could actually have an ID associated with them since they would be unique.

6

By the way your design looks great

7

Thanks Rayzur for the help. Worked perfectly!

Thank you Ethan-27 for the compliment :slight_smile:

8

One more question regarding this.

If it possible say like on a lower resolution or smaller monitor to have the figures I have on the right-hand side not to show the whole body with no scrollbar if the text doesnt scroll that far. Like say the browser is small and stops around his knees is it possible to have it so theres no scroll below that unless the text is longer then it will scroll and see the rest of his legs/feet?

Thanks,

Mike

9

^
In order to hide in a vertical manner like that it would require setting overflow:hidden; on your body element with height:100% and then AP’ing the figure in relation to the body.

Doing that would cause problems with your #wrapper div though when it actually needed to scroll. You have no idea what your users settings and monitor sizes will be so I would highly discourage it.

Now if you were wanting to hide something on the horizontal axis that would be a different story and it could be done without too much risk.

10

How about adding the legs only as part of the background image and that will only get revealed depending on the page height.

It would be a little fiddly to match up exactly but should be easily possible.

11

Good idea Paul. Thanks

My last question is on the Services page when you rollover Bracing, Rehabilitation etc and the popup opens up the text goes out of the speech bubble I tried to make the width of the .tip class 150px but that didnt work, any ideas how to make it so my text remains in the large bubble without going out.

Thanks,

Mike

12

Just add some padding right and the reduce the width.


h2.popup a span {
  padding-right: 55px;
  width: 180px;
}
13

Perfect!!! Not sure how I missed that lol