Use lightbox with rollover images.

  • Profile Image
    sriley91
    Asked on July 17, 2011 at 08:54 PM

    Reference: http://www.seanriley.co.uk/

    As you can see from the above image, i have used standard roll-over images (created in dreamweaver) to create my menu. Is there anyway to use the lightbox feature with them? I have tried and failed. 

    Thanks,

    Sean!

  • Profile Image
    allanftd
    Answered on July 18, 2011 at 06:40 AM

    Hi sriley91,

    Thank you for your message. Can you please try pasting this code into Dreamweaver's text editor:

    <script src="//www.jotform.com/min/g=feedback" type="text/javascript">

    new JotformFeedback({

    formId:'11711418362',

    base:'http://www.jotform.com/',

    windowTitle:'Form',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700

    });

    </script>

    <a id="lightbox-11711418362" style="cursor:pointer;color:blue;text-decoration:underline;">
    <img src="//www.gb42.com/clickhere.gif" alt="Click here">
    </a>

    The text highlighted in yellow is the tag you should use to embed an image, so change the URL of the image to the one you want to use.

    Please try and let us know how it goes. Thank you for using JotForm!

    JOTFORM SUPPORT

     

  • Profile Image
    sriley91
    Answered on July 18, 2011 at 07:26 AM

    Hey Allanftd,

    The lightbox works but with one problem: I can't get the rollover image to work. 

    I have the 'CV' button working but with no luck on the rollover. (See site)

    Best,

    Sean

  • Profile Image
    NeilVicente
    Answered on July 19, 2011 at 02:16 AM

    Hi Sean,

    First, remove the non-working lightbox code in your page:

    then insert this one:

    <script src="https://www.jotform.com/min/g=feedback" type="text/javascript">
    new JotformFeedback({
    formId:'11981322182',
    base:'http://yang.interlogy.com:82/',
    windowTitle:'Request CV',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:false,
    height:500,
    width:700
    });
    </script>

    Next, find the code below in your page:

    <a onmouseover="MM_swapImage('Image32','','image/nav/cv_over.png',1)" onmouseout="MM_swapImgRestore()" target="_blank" href="CV.html"><img width="100" height="60" border="0" id="Image32" name="Image32" src="//dl.seanriley.co.cc/u/6170568/website/image/nav/cv.png"></a>


    Insert class="lightbox-11981322182" inside the <a tag so it becomes:

    <a class="lightbox-11981322182" onmouseover="MM_swapImage('Image32','','image/nav/cv_over.png',1)" onmouseout="MM_swapImgRestore()" target="_blank" href="CV.html"><img width="100" height="60" border="0" id="Image32" name="Image32" src="//dl.seanriley.co.cc/u/6170568/website/image/nav/cv.png"></a>

     

    Let us know if it works or not. We look forward to your updates. Thanks and have a good one!


    Neil

  • Profile Image
    Voctronica
    Answered on November 12, 2011 at 09:46 AM

    Thanks so much. Works perfectly!