PDA

View Full Version : Javascript Hover Help



wjr
03-12-2007, 11:24 AM
Hi Guys,

Looking for some help.

Here is the page :

http://www.kitchen-surplus.co.uk/item--C-Shape-Jig--CShape.html

What i require is that when someone hovers over any of :

1 X Tube of Mitre Seal
10 X 150mm Worktop Bolts
Professional TCT Router Cutter

For the text to underline.

They are inside a <h3> and <div> tag.

An example of the coding for the top one is :

<h3 style="display: inline; color: black;" id="bobcontent1-title" class="handcursor"><font color="#828282" face="VERDANA" size="2"> 1 X Tube of Mitre Seal </font><br></h3>

I don't currently have access to my FTP so do not want a solution that involves messing with the CSS if possible.

I know it's more laborious to insert the code manually everytime that it is used but this is fine for me as i will always use the same blank template for a product anyway.

Any help appreciated.

Thanks!

Will.

Veronica
03-13-2007, 04:13 AM
Using mouseover should be able to do it

<h3 style="display: inline; color: black;" id="bobcontent1-title" class="handcursor" onmouseover="this.style.textDecoration='underline';"><font color="#828282" face="VERDANA" size="2"> 1 X Tube of Mitre Seal </font><br></h3>

wjr
03-13-2007, 08:50 AM
Nope no such luck.

This is what i have as the product description at the moment :

<center> <div> <a href="javascript:bobexample.sweepToggle(`contract`)">Contract All</a> <a href="javascript:bobexample.sweepToggle(`expand`)">Expand All</a><br><br> Click a heading below to view further information. <br> <br> <h3 style="display: inline; color: black; cursor:pointer;cursor:hand" id="bobcontent1-title" class="handcursor"><font color="#828282" face="VERDANA" size="2"> Professional 700mm Worktop Jig </font><br></h3> <div style="display: none;" id="bobcontent1" class="switchgroup1"> <font face="VERDANA" color="#0" size="2"> <p align="center"><font face="Verdana" size="1"> This 700mm jig cuts 400-700mm wide inclusive. </font></p> <p align="center"><font face="Verdana" size="1"> Cuts both right and left 45 joints. </font></p> <p align="center"><font face="Verdana" size="1"> Cuts both right and left standard 90 joints. </font></p> <p align="center"><font face="Verdana" size="1"> Patented closed bolt design that provides extra stability for the mitre cut. </font></p> <p align="center"><font face="Verdana" size="1"> All jigs come boxed, supplied with a full set of easy to follow instructions. </font></p> <p align="center"><font face="Verdana" size="1"> All jigs are made of 12mm Hardwearing Solid Compact laminate - with a lifetime guarantee to never warp. </font></p> <p align="center"><font face="Verdana" size="1"> Top UK Quality, from the UK s largest manufacturer of worktops jigs </font></p> </div> <h3 style="display: inline; color: black; cursor:pointer;cursor:hand" id="bobcontent2-title" class="handcursor"> <font color="#828282" face="VERDANA" size="2"> FAQ </h3> <div id="bobcontent2" class="switchgroup1"> <font face="VERDANA" color="#0" size="2"> <p align="center"><font face="Verdana" size="1"> <i>Do you ship outside the UK?</i> <br> Yes, please click <A HREF="(CGIVAR)common_url(/CGIVAR)&pg=extended_delivery">here</A> for delivery charges. </font></p> <p align="center"><font face="Verdana" size="1"> <i>How much does the jig weigh? </i><br> This jig weighs roughly 8kg s. </font></p> <p align="center"><font face="Verdana" size="1"> <i>How thick is the jig?</i> <br> The jig is made from 12mm Melamine faced MDF. </font></p> </div> <br> <h3 style="display: inline; color: black; cursor:pointer;cursor:hand" id="bobcontent3-title" class="handcursor"> <font color="#828282" face="VERDANA" size="2"> Other Equipment Required </h3> <div id="bobcontent3" class="switchgroup1"> <font face="VERDANA" color="#0" size="2"> <p align="center"><font face="Verdana" size="1"> 1/2" Router ( Minimum 1600W ) <br> 30mm Guide Bush <br> <a href="http://www.kitchen-surplus.co.uk/item--Router-Bits--RB.html"> 1/2" Shank 63.5mm Router Cutter </a> <br> <a href="http://www.kitchen-surplus.co.uk/item--Heavy-Duty-G-Clamps-6-Inch--CL.html">At Least 2 X Quick Action Clamps</a> <br> <a href="http://www.kitchen-surplus.co.uk/item--Worktop-Connector-Bolts--Connector.html"> At least 3 X Worktop Bolts per joint </a> <br> <a href="http://www.kitchen-surplus.co.uk/item--Mitre-Seal--MS.html"> Worktop Sealant </a> </font></p> </div> <script type="text/javascript"> var bobexample=new switchcontent(`switchgroup1`,`div`); bobexample.setStatus(``,``); bobexample.setColor(`darkred`,`black`); bobexample.setPersist(true); bobexample.collapsePrevious(true); bobexample.init(); </script>

codeexploiter
03-13-2007, 09:04 AM
I saved your web page and modified its source code and it now works as you want.



<br></font><center><font color="#828282" face="VERDANA" size="2"> </font><div><font color="#828282" face="VERDANA" size="2"> <a href="javascript:bobexample.sweepToggle('contract')">Contract All</a> <a href="javascript:bobexample.sweepToggle('expand')">Expand All</a><br><br> Click a heading below to view further information. <br> <br> </font><h3 style="display: inline; color: darkred;" id="bobcontent1-title" class="handcursor"><span class="status"></span><font color="#828282" face="VERDANA" size="2"><span color="#828282" face="VERDANA" size="2" onMouseOver="this.style.textDecoration = 'underline'" onMouseOut="this.style.textDecoration = 'none'"> 1 X Tube of Mitre Seal </span><br></font></h3><font color="#828282" face="VERDANA" size="2"> </font><div style="display: block;" id="bobcontent1" class="switchgroup1"><font color="#828282" face="VERDANA" size="2"> <font color="#000000" face="VERDANA" size="2"> </font></font><p align="center"><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font face="Verdana" size="1"> Simple and easy to use. A great choice for the DIY’er. </font></font></font></p><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> </font></font><p align="center"><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font face="Verdana" size="1"> For cutting 90° joints in 600/900mm worktops respectively.</font></font></font></p><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> </font></font><p align="center"><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font face="Verdana" size="1"> Durable surface that will not work. </font></font></font></p><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> </font></font><p align="center"><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font face="Verdana" size="1"> All jigs come boxed, supplied with a full set of easy to follow instructions. </font></font></font></p><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> </font></font><p align="center"><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font face="Verdana" size="1"> Top UK Quality, from the UKs largest manufacturer of worktops jigs </font></font></font></p><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> </font></font></div><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> </font></font><h3 style="display: inline; color: black;" id="bobcontent2-title" class="handcursor"><span class="status"></span><span class="status"></span><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><span color="#828282" face="VERDANA" size="2" onMouseOver="this.style.textDecoration = 'underline'" onMouseOut="this.style.textDecoration = 'none'"> 10 X 150mm Worktop Bolts </span><br></font></font></h3><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> </font></font><div style="display: none;" id="bobcontent2" class="switchgroup1"><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> <font color="#000000" face="VERDANA" size="2"> </font></font></font><p align="center"><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font face="Verdana" size="1"> <i>Do you ship outside the UK?</i> <br> Yes, please click <a href="http://www.kitchen-surplus.co.uk/cgi-bin/cp-app.cgi?usr=51F9788166&amp;rnd=8728700&amp;rrc=N&amp;affl=&amp;cip=59.93.34.245&amp;act=&amp;aff=&amp;pg=extended_delivery">here</a> for delivery charges. </font></font></font></font></p><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> </font></font></font><p align="center"><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font face="Verdana" size="1"> <i>How much does the jig weigh? </i><br> This jig weighs roughly 8kgs. </font></font></font></font></p><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> </font></font></font><p align="center"><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font face="Verdana" size="1"> <i>How thick is the jig?</i> <br> The jig is made from 12mm Melamine faced MDF. </font></font></font></font></p><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> </font></font></font></div><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> </font></font></font><h3 style="display: inline; color: black;" id="bobcontent3-title" class="handcursor"><span class="status"></span><span class="status"></span><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><span color="#828282" face="VERDANA" size="2" onMouseOver="this.style.textDecoration = 'underline'" onMouseOut="this.style.textDecoration = 'none'"> Professional TCT Router Cutter </span><br></font></font></font></h3><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> </font></font></font><div style="display: none;" id="bobcontent3" class="switchgroup1"><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> <font color="#000000" face="VERDANA" size="2"> </font></font></font></font><p align="center"><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font face="Verdana" size="1"> 1/2" Router ( Minimum 1600W ) <br> 30mm Guide Bush <br> <a href="http://www.kitchen-surplus.co.uk/item--Router-Bits--RB.html"> 1/2" Shank 63.5mm Router Cutter </a> <br> <a href="http://www.kitchen-surplus.co.uk/item--Heavy-Duty-G-Clamps-6-Inch--CL.html">At Least 2 X Quick Action Clamps</a> </font></font></font></font></font></p><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> </font></font></font></font></div><font color="#828282" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"><font color="#000000" face="VERDANA" size="2"> <script type="text/javascript"> var bobexample=new switchcontent('switchgroup1','div'); bobexample.setStatus('',''); bobexample.setColor('darkred','black'); bobexample.setPersist(true); bobexample.collapsePrevious(true); bobexample.init(); </script><br>


The modifications I've made is in blue color.