I have been trying to figure out whether I should use css or javascript for an image display when the mouse goes over a certain part of text. Basically, the image should be displayed in the left container while the mouse is moved over on of 4 points in the right container.
I was thinking of placing an image for the text in the right container and then having another image overlap the entire image to give it a glowing effect. What I have is 4 dot point (you could call it 4 instructions), and I want to apply the effect when hovered over the 1st ,2nd ,3rd or 4th point that particular box highlights with the lighter image. Similar effect to rollover buttons but the only other added thing is to display 1 of 4 pictures in the left container when the mouse hovers over the 4 different steps. I did think of using flash but surley there must be a way to code this in css or even using javascript to get it working.
I have supplied the files except for the 4th image. I have an image for the 4 steps and then another image what it should look like when the mouse hovers over each step.
Does anyone know if this is possible to be done using CSS at all?
I suggest placing the "points" in an ordered list, and use CSS/background-images/padding to apply your effect.
KDLA
Centauri
05-07-2008, 07:40 PM
Yes, this is quite staightforward to do via css hovers. If you give me a little time I will set the whole site up locally on my machine, including the contact button change I outlined in the other thread (I assume the contact button will be present on each page?), and have a play. A glance through the css does reveal the right content being absolutely positioned, and this shouldn't be necessary - the two columns can be floated side by side.
I will return...
Centauri
05-07-2008, 09:47 PM
I assume the circled numbers are on separate layers in your photoshop file? Could you extract the four number graphics as transparent png files of the minimum size (looks to be around 40px square), and post them up? Will make the job of coding the rollover stuff much easier.
elv8
05-07-2008, 10:02 PM
I assume the circled numbers are on separate layers in your photoshop file? Could you extract the four number graphics as transparent png files of the minimum size (looks to be around 40px square), and post them up? Will make the job of coding the rollover stuff much easier.
Hi Centauri,
Attached are 4 transparent png files. Does it matter how the png files are saved - by this I mean PNG8 or PNG24, I have them saved in PNG24.
Thank you for you kind time in helping me out.
elv8
05-07-2008, 11:23 PM
here are the files again
Centauri
05-08-2008, 12:43 AM
No, I mean just the circled numbers. The text part should always be actual text, and the main background will be a repeat, so I need just the numbers as separate graphics (with an alpha transparency on the feathered shadow edge).
elv8
05-08-2008, 01:20 AM
No, I mean just the circled numbers. The text part should always be actual text, and the main background will be a repeat, so I need just the numbers as separate graphics (with an alpha transparency on the feathered shadow edge).
Here are the images once more as numbers, thanks.
Centauri
05-08-2008, 01:37 AM
Thats what I meant about separate numbers, but they need to be 24bit with the outer shadow in alpha transparency so they can be put on top of the background gradient image - should be just a matter of turning of all layers in the photoshop file except the numbers and saving them with existing transparency.
elv8
05-08-2008, 01:52 AM
Thats what I meant about separate numbers, but they need to be 24bit with the outer shadow in alpha transparency so they can be put on top of the background gradient image - should be just a matter of turning of all layers in the photoshop file except the numbers and saving them with existing transparency.
Here are the images again as instructed with all the layers turned off. I never knew about this way, thanks for the great advice.
Centauri
05-08-2008, 02:15 AM
We'll get there - these don't appear to have the shadow evident on the earlier composites - sorry to be a pain, but try turning on the shadow layer and resave. Thanks :)
elv8
05-08-2008, 02:24 AM
We'll get there - these don't appear to have the shadow evident on the earlier composites - sorry to be a pain, but try turning on the shadow layer and resave. Thanks :)
Centauri, my mistake, i thought that it required the background shadow, here they are again. I believe these ones should be the right ones. These are with the shadow.
elv8
05-08-2008, 02:27 AM
Centauri, my mistake, i thought that it required the background shadow, here they are again. I believe these ones should be the right ones. These are with the shadow.
I have supplied the images also with the mouse over background effect just in case.
Centauri
05-08-2008, 02:36 AM
On those last set of graphics (the over) there appears to be a dropshadow halo effect around the number, separate to the background gradient. It is this dropshadow and the number I am trying to get together, without the gradient or flat grey background, basically so that it can be placed on top of anything and still look like it is raised above.
Centauri
05-08-2008, 06:04 AM
Ignore that last post - the shadows ARE there in the graphics posted in post #10, just wasn't obvious until I put it against a light background. Will have a play and post back (its getting late here now, so may not get a chance to post back until tomorrow.
elv8
05-08-2008, 06:28 AM
Hi Centauri, thats fine mate, you get some rest.
Another thing I was going to mention, I have been playing around with a popup script for the contact button. I originally was going to code the pop up through css but I've had some trouble and not sure if its possible to display a popup box by calling up an action through html defined in the css as a seperate popup box that flows over the main site. Here is what I got anyway:
http://bodyboarding.net.au/popup.html
It act's fine in Firefox but not in IE7.
I must quote this thread by Kor - http://www.webdeveloper.com/forum/showthread.php?t=179817&highlight=popup
A popup blocker does exactly what its name suggests: blocks the popups. So that a popup will not hold up in browsers which have the popup blockers active (and most wise users do activate that option, if they have it). Further more, if the user disables the javascript in his browser, the popup will not appear.
It might actually be not a good idea to use a popup and instead go with an iFrame judging by the last post on that thread. :)
Centauri
05-08-2008, 09:16 AM
Hi,
The popup can be done entirely with a css hover quite easily - I certainly wouldn't use an iframe. Will look at this after we get the steps stuff sorted.
In the meantime, here is some more stuff to keep you busy, and addresses a few issues including the site breaking when text is resized due to the fixed heights, and floating the two columns.
I also noticed unnecessary absolute positioning in the header with the banner divs - the absolute positioning and widths are not needed, and the css for this section can reduce to :#top_banner {
background: url(images/topbanner.png) no-repeat;
height:33px;
}
#bottom_banner {
background: url(images/header.png) no-repeat;
height: 81px;
}
Next, to make the site height fluid, we can trim up the left_side and right_side graphics and create a new tileable strip for the #contentWrapper - the changed and new graphics are attached here. The #left_side and #right_side divs can then be resized and positioned better, also specifying the top position - you should always specify both x and y coordinates when absolute positioning so the browser does not have to guess. :/* LEFT SIDE CONTAINER IMAGE */
The #contentWrapper gets the repeated strip as a background, and has the height and auto side margins removed. Setting the overflow property forces the div to surround floats, and a 100% width does the same for IE6 :/* CONTENT CONTAINER STYLES */
Next to float the columns. All that is required here is to set the width, margin, and float it - all heights should be removed. Inline display avoids IE6's doubled float margin bug :#leftContent {
width:313px;
margin: 0 0 0 32px;
float: left;
display: inline;
}
#rightContent {
width:494px;
margin: 0 40px 0 0;
float: right;
display: inline;
}
You may have noticed an initial pause when you first rollover the contact button due to loading another graphic - this can be solved by combining both states into one graphic like the navigation rollovers, and the rollover effected by a background shift. The revised graphic is also attached. I also applied a clear so that the button doesn't get caught on the #rightContent div. The changed css is :#contact_button {
width: 60px;
height: 18px;
margin: -10px 30px 0 0;
float:right;
display: inline;
background-image:url(images/contact.png);
outline:none;
position: relative;
clear: right;
}
#contact_button:hover {
background-position: left bottom;
text-decoration: none;
}
Another problem that crops up when text is resized is the divider lines made up of dots in a <h3> - the dotline class. A better solution is to get rid of those <h3>s and apply the class to the paragraph, styling it with a top dotted border and padding :.dotline { /* Dotted Line Effect */
padding:0.5em 0 0;
border-top: 1px dotted #000;
}
and the html for the index page :<h1>About</h1>
<p class="dotline">Accuball is a hand eye coordination training aid design for all types of sport enthusiasts and martial artists seeking hand speed timing and accuracy. When striking the target Accuball offers unpredictable vertical and horizontal movements as well as instant adjustability to change its tension and height, this allows the target to travel at varied heights, speeds and distances. </p><p class="dotline"></p>the market page: <h1>Target market</h1>
<p class="dotline">Males and females that participate in martial arts and boxing from ages 10 to 40.<br />
Amateur and professional athletes from various sport codes that require hand-eye coordination.</p>
<h1>Market need</h1>
<p class="dotline">Virtually no specific hand eye coordination products marketed at sport participants.<br />
All related products require major reinforcements making them more suited for gyms.<br />
Comparable products offer repetitive and predictable movement.</p>
<h1>Market potential</h1>
<p class="dotline">In Australia 230,000 people or 1.4 % of the population participate in martial arts. <br />
In the United States 6 Million or 2.3% of the population participated in martial arts regularly.<br />
In the US sporting equipment sales were 23,390 million.<br />the upgrades page : <h1>Upgrades</h1>
<p class="dotline">Each Accuball target has been designed for optimum performance. In prototyping and testing stages the weight, volume, and density have been critical to its dynamic movement. Each upgrade ball comes with replacement cord, cord lock and a DVD demonstrating the potential of the product as well as advertising other upgrades.<br /><br />
</p>etc - same thing for the manufacturing and developer pages.
All that gives the site some flexibility to expand vertically with content amount and/or text resize, and means you can be more liberal inthe content you put in. It also makes fitting the steps buttons and rollover in much easier - I will work on this tomorrow.
Cheers
Centauri
05-08-2008, 09:19 AM
Oops, forgot to attach the graphics :)
elv8
05-08-2008, 10:54 AM
Hi,
The popup can be done entirely with a css hover quite easily - I certainly wouldn't use an iframe. Will look at this after we get the steps stuff sorted.
In the meantime, here is some more stuff to keep you busy, and addresses a few issues including the site breaking when text is resized due to the fixed heights, and floating the two columns.
Hi Centauri,
First of all I would like to thank you very much for taking the time to debug my code. I have learned so many things from you and the mistakes I was doing.
I have fixed the #top_banner & #bottom_banner - yes I understand now that there is no point of having absolute positioning and widths.
I love what you did with the #left_side & #right_side images - that is such a cool trick and so amazing how great it works with the #contentWrapper content_back.png image. I never knew how to do this and its amazing what you can do with the repeat-y value!
The column float is again something that I have been looking for a long time. I've seen it used in websites code but never understood until you illustrated it to me. Inline display avoids IE6's doubled float margin bug - WoW, great bug!!!
The #contact_button workaround is so much better and I fully understand as I was getting that initial pause upon first rollover button loading another graphic.
The .dotline code - WoW! and here I was placing dots and trying to workout the font, size, for the dots. This is so simple and so effective on both the code and the appearance. Thank Youuu. :)
I have updated the test site on bodyboarding.net.au and I can definitely see the change it has made to the weight of the page and the code!!!
Centauri, again you are simply the Greatest, I love the way you code and your understanding behind the principles in the code. I will chat with you tomorrow. Thanks again :)
Centauri
05-08-2008, 11:16 AM
I note you still have a height set on #contentWrapper - this causes the content to disappear if the text is resized instead of expanding the box - the height needs to go (or you could use min-height instead).
elv8
05-08-2008, 11:32 AM
I note you still have a height set on #contentWrapper - this causes the content to disappear if the text is resized instead of expanding the box - the height needs to go (or you could use min-height instead).
The reason why I left it there is to keep the height the same in each page, I have used the min-height instead for this site. I now know how it reacts and thats what I will be using for my next hobby site. thanks for the min-height :) rather then just height: on it own.
Centauri
05-08-2008, 11:39 AM
Yeah, that's better - doesn't break now.
Centauri
05-08-2008, 10:25 PM
Ok, have had a play with the setup page and looked at IE6 compatability.
The setup instructions are basically an ordered list, so it can be marked up as such, with the number graphics preceding the text. To do the popup images, the images can also be within the list <li>s but hidden and revealed on hover of the <li>. To easily target these images in the css, they can be enclosed in a span, and the span can be hidden and revealed as needed. The html markup for the setup list can be: <ol id="steps">
<li>
<img src="images/1transparent.png" alt="" class="img1" />
Lay floor plate on ground with weights disk placed on top, snap stem into floor plate
<span><img src="images/step_1.gif" alt="Step 1 picture" /></span>
</li>
<li>
<img src="images/2transparent.png" alt="" class="img2" />
Wrap cord around overhead support then feed through lock until cord becomes tight
<span><img src="images/step_2.gif" alt="Step 2 picture" /></span>
</li>
<li>
<img src="images/3transparent.png" alt="" class="img3" />
Wrap cord around tension and adjust stem until the required tension
<span><img src="images/step_3.gif" alt="Step 3 picture" /></span>
</li>
<li>
<img src="images/4transparent.png" alt="" class="img4" />
Squeeze height, adjust cord lock and raise or lower to desired height
<span><img src="images/step_4.gif" alt="Step 4 picture" /></span>
</li>
</ol>
This just goes in the #rightContent div. This uses the transparent number images you posted in post #10, and the step images. The class names applied to the number images are only there for the benefit of an IE6 fix which I will decribe later. The css for this section is:#steps {
margin: 0;
padding: 0;
font-size: 110%;
}
#steps li {
list-style: none;
height: 60px;
background-image: url(images/steps_back.png);
background-repeat: repeat-x;
background-position: left bottom;
padding: 20px 0 0 36px;
}
#steps li:hover, #steps li.sfhover {
background-position: left top;
}
#steps img {
vertical-align: middle;
margin-left: -36px;
}
#steps span {
position: absolute;
left: -999em;
top: 5px;
width: 313px;
height: 320px;
}
#steps span img {
margin: 0;
display: block;
}
#steps li:hover span, #steps li.sfhover span {
left: 40px;
}
Here the #steps <ol> gets its default margins/padding zeroed and font size set. The list numbers are removed from the <li>s, and the height is set along with some padding. The top padding spaces things from the top and the total height of each <li> will be 80px. The background is a new image which is attached here, and is a tileable image wich contains both a gradient and flat section - the initial position just displays the flat section. On hover of the <li>, the background position is changed to show the gradient. Also notice that the :hover rule includes the case where the <li> gets a class of "sfhover" - this works in conjuction with a javascript to make hover work on the <li>s in IE6, which I will describe later.
The images are given a center vertical align, which places the text in line with the centre of the images. Note in the <li> styling there is a left padding of 36px, and the images gets a corresponding negative left margin of -36px to pull them back into the original position - if the text now wraps to the next line when text is resized, the text will line up as though the image was a bullet.
The spans containing the instructional images are sized and positioned absolutely. As the nearest parent container that has its position property set is the #contentwrapper div, these spans will be placed relative to that. The spans are initially placed way off the left of the page where they cannot be seen via the negative left parameter. The images within the spans need to have the margin zeroed (as they will also inheret the margin set previously) and set to block display to avoid gaps. On hover of the <li>s, the spans are moved into position with the left:40px setting.
Will describe getting all this to work in IE6 next post.
Centauri
05-08-2008, 10:43 PM
IE6 - things would be much easier if this browser didn't exist ...... :D
You currently have code on your pages to conditionally link to the Dean Edwards' IE8 javscript fix, but the call to this is not nested properly so it doesn't work. When it is enabled, it causes problems with this layout anyway, so forget about that script.
Tackling the png transparency issue first, this can be done by conditionally linking an extra style sheet in each page, so replace the conditional comments you currently have on each page with : <!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
The ie6.css file will then look like this :#steps .img1 {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='images/1transparent.png');
padding-top: 36px;
}
#steps .img2 {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='images/2transparent.png');
padding-top: 36px;
}
#steps .img3 {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='images/3transparent.png');
padding-top: 36px;
}
#steps .img4 {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='images/4transparent.png');
padding-top: 36px;
}
#top_banner {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/topbanner.png',sizingMethod='scale');
}
#footer {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottom.png',sizingMethod='scale');
}
This uses the DirectX AlphaImageLoader to replace the transparent number images (the reason they have classes assigned to them) and the backgrounds of #top_banner and #footer.
This leaves the issue of the <li> hover, which can be addressed with a modification to the suckerfish javascript. The link to this can be included within the conditional comments on the setup page only : <!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<script src="sfhover.js" type="text/javascript"></script>
<![endif]-->
and the sfhover.js file will be :sfHover = function() {
var sfEls = document.getElementById("steps").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);This dynamically assigns the .sfhover class to the <li>s when they are hovered.
I will think more about your contact popup soon.
elv8
05-09-2008, 02:17 AM
I have done the setup page and added an extra line to display the image in the left container, work great. The image has a line through it towards the bottom but thats the images fault and not the code. This is what I added and now displays the image fine.
<li>
<img src="images/1transparent.png" alt="" class="img1" />
Lay floor plate on ground with weights disk placed on top, snap stem into floor plate
<span><img src="images/step_1.gif" alt="" /></span>
<span><img src="images/setup_step_1.jpg" alt=""/> </li>
Thanks heeps for working out the code, I now know how to display images using an ordered list, very clever trick I must say. I must also say excellent what you have done with the background image repeat WoW!! so simple but so effective on weight of the page. I like that :)
Regarding the Dean Edwards' IE8 javscript fix, your right to leave it out as it causes layout issues. I have done as you explained and placed the code in the setup page:
Also got the javascript file and not sure if I have done this the correct way.
Could you please review the site and see how it is now. Ive managed to get the flash images animated aswell so you should see animation on each page now. Disregard the white lines below the images as they were supplied to me like that by my mate so I would say he will have to re-do them for me again as it affects the site. I did notice that in IE the background of the image is a different color as well as the bottom background of the top menu? would this be the cause of the transparent images with IE as it seems fine in Firefox.
I'm very pleased with the time you have contributed to my queries. WoW, where do you get all this knowledge from...
Here is the link again of the updated files with the flash images www.bodyboarding.net.au
Centauri
05-09-2008, 03:14 AM
Hang on, you have an error there in the list html. The step_1.gif images I referenced are the ones you posted in an earlier thread - if the actual images on the site are setup_step_1.jpg, then all you need to do is replace the filename :<li>
<img src="images/1transparent.png" alt="" class="img1" />
Lay floor plate on ground with weights disk placed on top, snap stem into floor plate
<span><img src="images/setup_step_1.jpg" alt="" /></span>
</li>As is is now, you have un extra unclosed span in the code which is causing IE6 (at least) problems (the javascript seems to be working, though).
elv8
05-09-2008, 03:28 AM
Hang on, you have an error there in the list html. The step_1.gif images I referenced are the ones you posted in an earlier thread - if the actual images on the site are setup_step_1.jpg, then all you need to do is replace the filename :<li>
<img src="images/1transparent.png" alt="" class="img1" />
Lay floor plate on ground with weights disk placed on top, snap stem into floor plate
<span><img src="images/setup_step_1.jpg" alt="" /></span>
</li>As is is now, you have un extra unclosed span in the code which is causing IE6 (at least) problems (the javascript seems to be working, though).
Ohh oops, I just realised that now that you pointed that out, I have fixed that right now. I'm cleaning out the unnecessary files I had from the previous attempts. Geeee, there were so many not that I looked at the folder.
Centauri
05-09-2008, 03:53 AM
There is funny things going on with the footer in IE6, and a look at the html again shows the email link button in the wrong place in the html on all pages - it should be after the #rightContent div but before the end of the #contentWrapper div :<div id="rightContent">
.
.
.
.
.
</div>
Retract that last instruction - it causes the button to be hidden behind the footer in IE6 and can affect the content height in FF. Instead, move the contact link into the footer div - seems to work there.
Also, change the height setting on #contentWrapper to min-height.
Looking good though.
elv8
05-09-2008, 04:14 AM
There is funny things going on with the footer in IE6, and a look at the html again shows the email link button in the wrong place in the html on all pages - it should be after the #rightContent div but before the end of the #contentWrapper div :<div id="rightContent">
.......
</div>
I have placed that as you have said before the ending <div> content container but somehow the contact button appears to flow up and down the the page of the right container (in Firefox) and in IE it doesn't even get displayed. Is there a way to fix the button to the page by applying any style to the #contact_button in css?
elv8
05-09-2008, 04:15 AM
Retract that last instruction - it causes the button to be hidden behind the footer in IE6 a
Applying that now.
elv8
05-09-2008, 04:33 AM
Retract that last instruction - it causes the button to be hidden behind the footer in IE6 and can affect the content height in FF. Instead, move the contact link into the footer div - seems to work there.
Also, change the height setting on #contentWrapper to min-height.
Looking good though.
Thats amazing how that contact button has changed it state been in the correct div container, WoW!!! I placed the code into the footer container and works like a dream now. Damn thats good, thanks heeps.
Regarding that min-height style in #contentWrapper, what is the deal in using that compared to just height: by itself? When I use height: on its own I find the page doesn't move down and is fixed at 342px, but when I use min-height I find that the bottom of the layout expands slightly due to the extra text on some pages. Is it possible to use just height on its own to combat this problem to keep the height fixed at 1 width or can this complicate cross-browser compatibility.
The only thing I can think of is the text in IE is arranged with a slight greater line spacing compared in Firefox. This can be clearly seen for example on manufacturing.html (http://bodyboarding.net.au/manufacturing.html) page where the dots are given a greater spacing then in Firefox. Is this an IE bug that can be fixed and applied to all the text or does it have to be applied to each paragraph, heading and the dotted effect? Thanks again for all the wonderful support you have provided me with. :)
Centauri
05-09-2008, 04:47 AM
The problem with setting the height is that as soon as someone increases the text size (or uses an overriding stylesheet to set larger text sizes, the extra height taken up by the text is hidden and cannot be read - the reason flexible height is desirable. However, as the various flash animations have the bottom indicator to mate with the footer graphic, a gap can appear. Perhaps the best way is to absolutely position the #leftContent div so that it can be locked to the bottom of the contentWrapper div. To do that, change the css for #leftContent to :#leftContent {
width:313px;
margin: 0 0 0 0;
position: absolute;
bottom: 0;
left: 32px;
}
Centauri
05-09-2008, 04:53 AM
I almost forgot - IE6 doesn't know the meaning of min-height, but it treats height like min-height (stupid browser that it is). Therefore we need another rule just to feed it the height via a star-html hack:* html #contentWrapper {
height: 324px;
overflow: visible;
}
Centauri
05-09-2008, 04:58 AM
I just noticed that as you have used a different footer image for the video page, that image will also have to be added to the ie6.css file:
#footer_two {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottom2.png',sizingMethod='scale');
}
elv8
05-09-2008, 05:21 AM
I just noticed that as you have used a different footer image for the video page, that image will also have to be added to the ie6.css file:
#footer_two {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottom2.png',sizingMethod='scale');
}
Yes I added another footer image since there was shading on several page for the animated flash file. I almost forgot and thanks for reminding about this.
Regarding
* html #contentWrapper {
height: 324px;
overflow: visible;
}
with these you simply put them below the main rule you have for the #contentWrapper?
elv8
05-09-2008, 05:27 AM
I almost forgot - IE6 doesn't know the meaning of min-height, but it treats height like min-height (stupid browser that it is). Therefore we need another rule just to feed it the height via a star-html hack:* html #contentWrapper {
height: 324px;
overflow: visible;
}
Just to check by you, in IE7 the height is still affected and moves slightly up and down from the #contentWrapper depending on how much text is on the page. Can this fix be be applied to IE7 to keep the layout at that fixed height of 324px?
Centauri
05-09-2008, 05:34 AM
with these you simply put them below the main rule you have for the #contentWrapper?
Yes.
The height has to be variable - even the last rule for IE6 still results in a variable minimum height page. If the left div is locked to the bottom against the footer, then the height variations shouldn't be a problem.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.