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

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="125" you can change that thumbnail size to any size you would like.


<!---Start Code------>
<div align="center">
<table border="0" width="100" cellspacing="0" cellpadding="0">
                                                        <tr>
                                                            <td valign="top" width="125">
                                                            <a OnMouseOver="mainphoto.src='{imageurl1}';" OnMouseOut="mainphoto.src='{imageurl1}';"><img src="{imageurl1}" width="125" hspace="0" vspace="0" border="0"></a>
                                                            <a OnMouseOver="mainphoto.src='{imageurl2}';" OnMouseOut="mainphoto.src='{imageurl2}';"><img src="{imageurl2}" width="125" hspace="0" vspace="0" border="0"></a><br>
                                                            <a OnMouseOver="mainphoto.src='{imageurl3}';" OnMouseOut="mainphoto.src='{imageurl3}';"><img src="{imageurl3}" width="125" hspace="0" vspace="0" border="0"></a>
                                                            <a OnMouseOver="mainphoto.src='{imageurl4}';" OnMouseOut="mainphoto.src='{imageurl4}';"><img src="{imageurl4}" width="125" hspace="0" vspace="0" border="0"></a><br>
                                                            <a OnMouseOver="mainphoto.src='{imageurl5}';" OnMouseOut="mainphoto.src='{imageurl5}';"><img src="{imageurl5}" width="125" hspace="0" vspace="0" border="0"></a>
                                                            <a OnMouseOver="mainphoto.src='{imageurl6}';" OnMouseOut="mainphoto.src='{imageurl6}';"><img src="{imageurl6}" width="125" hspace="0" vspace="0" border="0"></a><br>
                                                            <a OnMouseOver="mainphoto.src='{imageurl7}';" OnMouseOut="mainphoto.src='{imageurl7}';"><img src="{imageurl7}" width="125" hspace="0" vspace="0" border="0"></a>
                                                            <a OnMouseOver="mainphoto.src='{imageurl8}';" OnMouseOut="mainphoto.src='{imageurl8}';"><img src="{imageurl8}" width="125" hspace="0" vspace="0" border="0"></a><br>
                                                            <a OnMouseOver="mainphoto.src='{imageurl9}';" OnMouseOut="mainphoto.src='{imageurl9}';"><img src="{imageurl9}" width="125" hspace="0" vspace="0" border="0"></a>
                                                            <a OnMouseOver="mainphoto.src='{imageurl10}';" OnMouseOut="mainphoto.src='{imageurl10}';"><img src="{imageurl10}" width="125" hspace="0" vspace="0" border="0"></a><br>
                                                            <a OnMouseOver="mainphoto.src='{imageurl11}';" OnMouseOut="mainphoto.src='{imageurl11}';"><img src="{imageurl11}" width="125" hspace="0" vspace="0" border="0"></a>
                                                            <a OnMouseOver="mainphoto.src='{imageurl12}';" OnMouseOut="mainphoto.src='{imageurl12}';"><img src="{imageurl12}" width="125" hspace="0" vspace="0" border="0"></a><br>
                                                            <a OnMouseOver="mainphoto.src='{imageurl13}';" OnMouseOut="mainphoto.src='{imageurl13}';"><img src="{imageurl13}" width="125" hspace="0" vspace="0" border="0"></a>
                                                            <a OnMouseOver="mainphoto.src='{imageurl14}';" OnMouseOut="mainphoto.src='{imageurl14}';"><img src="{imageurl14}" width="125" hspace="0" vspace="0" border="0"></a><br>
                                                            <a OnMouseOver="mainphoto.src='{imageurl15}';" OnMouseOut="mainphoto.src='{imageurl15}';"><img src="{imageurl15}" width="125" hspace="0" vspace="0" border="0"></a>
                                                            <a OnMouseOver="mainphoto.src='{imageurl16}';" OnMouseOut="mainphoto.src='{imageurl16}';"><img src="{imageurl16}" width="125" hspace="0" vspace="0" border="0"></a><br>
                                                            </td>
                                                            <td valign="top">
                                                            <table border="0" width="100%" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td valign="top">
                                                                    
                                                                    
<center><a href="{imageurl1}" target="_blank">
<img src="{imageurl1}" hspace="0" border="0" name="mainphoto" align="left"></a></center>
                                                                    
                                                                    
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                            </td>
                                                        </tr>
                                                    </table>
</div>
<!---End Code------>                                                   

Have more questions? Submit a request

Comments

Powered by Zendesk