CODE - HOVER on image to enlarge on the same page. Thumbnails 2

inkFrog Support -

Put this code in your custom design where you wish to see your images. Make sure that when you add the design to the custom area you select for Template type: ADVANCED or the code will not work correctly.

Where you see  width="68" you can change that thumbnail size to any size you would like.

 

<!---Start Code------>

<div align="center">
                            <table border="0" width="41%" id="table838" cellspacing="0" cellpadding="10" bgcolor="#000000">
                                <tr>
                                            <td valign="top" bgcolor="#FFFFFF" width="450">
<font face="Verdana" size="2">

                                              <p align="center">
                                            <a href="{imageurl1}" target="_blank" style="text-decoration: none">
<img src="{imageurl1}" width="450"  hspace="0" border="0" name="mainphoto" align="center"></a></font></p></td>
                                            <td valign="top" bgcolor="#FFFFFF" width="290">
                                                            <a OnMouseOver="mainphoto.src='{imageurl1}';" OnMouseOut="mainphoto.src='{imageurl1}';"><img src="{imageurl1}" width="68" hspace="0" vspace="0" border="0"></a><font color="#000000" face="Veranda" size="2">
    
    </font>
                                                            <a OnMouseOver="mainphoto.src='{imageurl2}';" OnMouseOut="mainphoto.src='{imageurl2}';"><img src="{imageurl2}" width="68" hspace="0" vspace="0" border="0"></a><font color="#000000" face="Veranda" size="2">
    
    </font>
                                                            <a OnMouseOver="mainphoto.src='{imageurl3}';" OnMouseOut="mainphoto.src='{imageurl3}';"><img src="{imageurl3}" width="68" hspace="0" vspace="0" border="0"></a><font color="#000000" face="Veranda" size="2">
    
    </font>
                                                            <a OnMouseOver="mainphoto.src='{imageurl4}';" OnMouseOut="mainphoto.src='{imageurl4}';"><img src="{imageurl4}" width="68" hspace="0" vspace="0" border="0"></a><font color="#000000" face="Veranda" size="2">
                                                            <br>
    
    </font>
                                                            <a OnMouseOver="mainphoto.src='{imageurl5}';" OnMouseOut="mainphoto.src='{imageurl5}';"><img src="{imageurl5}" width="68" hspace="0" vspace="0" border="0"></a><font color="#000000" face="Veranda" size="2">
    
    </font>
                                                            <a OnMouseOver="mainphoto.src='{imageurl6}';" OnMouseOut="mainphoto.src='{imageurl6}';"><img src="{imageurl6}" width="68" hspace="0" vspace="0" border="0"></a><font color="#000000" face="Veranda" size="2">
    
    </font>
                                                            <a OnMouseOver="mainphoto.src='{imageurl7}';" OnMouseOut="mainphoto.src='{imageurl7}';"><img src="{imageurl7}" width="68" hspace="0" vspace="0" border="0"></a><font color="#000000" face="Veranda" size="2">
    
    </font>
                                                            <a OnMouseOver="mainphoto.src='{imageurl8}';" OnMouseOut="mainphoto.src='{imageurl8}';"><img src="{imageurl8}" width="68" hspace="0" vspace="0" border="0"></a><br>
                                                            <a OnMouseOver="mainphoto.src='{imageurl9}';" OnMouseOut="mainphoto.src='{imageurl9}';"><img src="{imageurl9}" width="68" hspace="0" vspace="0" border="0"></a><font color="#000000" face="Veranda" size="2">
    
    </font>
                                                            <a OnMouseOver="mainphoto.src='{imageurl10}';" OnMouseOut="mainphoto.src='{imageurl10}';"><img src="{imageurl10}" width="68" hspace="0" vspace="0" border="0"></a><font color="#000000" face="Veranda" size="2">
    
    </font>
                                                            <a OnMouseOver="mainphoto.src='{imageurl11}';" OnMouseOut="mainphoto.src='{imageurl11}';"><img src="{imageurl11}" width="68" hspace="0" vspace="0" border="0"></a><font color="#000000" face="Veranda" size="2">
    
    </font>
                                                            <a OnMouseOver="mainphoto.src='{imageurl12}';" OnMouseOut="mainphoto.src='{imageurl12}';"><img src="{imageurl12}" width="68" hspace="0" vspace="0" border="0"></a><br>
                                                            <a OnMouseOver="mainphoto.src='{imageurl13}';" OnMouseOut="mainphoto.src='{imageurl13}';"><img src="{imageurl13}" width="68" hspace="0" vspace="0" border="0"></a><font color="#000000" face="Veranda" size="2">
    
    </font>
                                                            <a OnMouseOver="mainphoto.src='{imageurl14}';" OnMouseOut="mainphoto.src='{imageurl14}';"><img src="{imageurl14}" width="68" hspace="0" vspace="0" border="0"></a><font color="#000000" face="Veranda" size="2">
    
    </font>
                                                            <a OnMouseOver="mainphoto.src='{imageurl15}';" OnMouseOut="mainphoto.src='{imageurl15}';"><img src="{imageurl15}" width="68" hspace="0" vspace="0" border="0"></a><font color="#000000" face="Veranda" size="2">
    
    </font>
                                                            <a OnMouseOver="mainphoto.src='{imageurl16}';" OnMouseOut="mainphoto.src='{imageurl16}';"><img src="{imageurl16}" width="68" hspace="0" vspace="0" border="0"></a></td>
                                        </tr>
                                </table>
                            </div>
<!---End Code------>    

 

Have more questions? Submit a request

Comments

Powered by Zendesk