Results 1 to 4 of 4

Thread: Javascript Hover Help

  1. #1
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Javascript Hover Help

    Hi Guys,

    Looking for some help.

    Here is the page :

    http://www.kitchen-surplus.co.uk/ite...g--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.
    Last edited by wjr; 03-12-2007 at 11:26 AM. Reason: Forgot to mention about the CSS

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  3. #3
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    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; cursorointer;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; cursorointer;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; cursorointer;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>

  4. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    I saved your web page and modified its source code and it now works as you want.

    Code:
    <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 UK’s 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 8kg’s.  </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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •