Thumbnail Link

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Does anybody know how to make a pic thumbnail that links to a window on the same page instead of going to another page? I know you can do that by text, but I want to know if you can do it by using an image instead of a text as a link to a pop up window. Can anyone help?
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Grace

Yes.. you should be able to do this. Do your usual code for your text link. In the place where you would normally have your text, put in your img src code.

I think that's all there is to it. As always, be sure to test on a testpage first.
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Hi Grace,

Did this work for you?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Grace - do you want to make a thumbnail into a larger image on the same page? like the tree image at the bottom of this page? http://hexham.info/swallowship -- (this is better than a pop up window in my opinion)

OR

Do you want to link to a seperate part of the same page (which is done by using 'anchors')

Let us know, either way is possible.

Lee.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
The first one.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
do you want to have a go at making it?
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Hi Littleus,

I did what you told me to do, but the link is still in text. Here's the code that I used:
-->
< img src="resources/Ben/Young Ben.png" alt=
-->

Can you see if there's anything wrong with it?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
you need to add code here like this
<!-- CODE GOES HERE -->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Grace

It does not look like you added the full code. Would you mind reposting?
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
To where?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Grace

I was just wondering if you could repost your code here on the forum which includes your whole a href and image code.

add <!-- to the beginning of your code and --> to the end of your code.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
<!--<a href="resources/Ben/Young Ben.png" target="popup"
onClick="window.open('resources/Ben/Young Ben.png', 'popup', 'width=640,height=460,menubar=0,toolbar=0,status=0,
scrollbars=1,resizable=1,location=0'); return false">
< img src="resources/Ben/Young Ben.png" alt="Image 1" border="0"></a>-->
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
its missing a " before scrollbars and there is a space in front of img bottom line. ?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
is this your site Is this your site
http://destinedfate-shinzo.synthasite... Ben.png ?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Grace.

I just want to be clear what your purpose here.

You want to create a image link which leads to a pop up? What is it you're trying to link to?

Or are you simply trying to make the thumbnail image pop up into a larger size?
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
It's a different site.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
I'm trying to make the thumbnail image in larger size, but to appear in a pop window.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Okay, I fixed it and it works. Thanks Duke!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
oh great!! Thanks Duke for helping her out.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Hey Duke,

One more thing. How do you change the size of the image that appears in the pop up?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
what you see on my site is not the same kind of code as what your using - if you wanted to try and add it we could give it a try. Its javascript, its not so easy to set up.

you would need to make the images, 1 small and 1 large.
and tell me the full synthasite url of your site.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Okay I'll try it. The site name is: http://ofbenandgwen.synthasite.com
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
I already made the two images.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
have you uploaded them to your file manager? what are they called? include any folder names.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
I'll give the url for both:
big image - resources/Ben/Young Ben.png

small image - resources/Ben/Young Ben 2.png
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
hi grace - im not getting the small image can you go back into your filemanager and rename it - taking out the spaces. thanks. Lee.

Also you could go much bigger than that if you like, these things work really well when you go from a little image to something half the size of the screen.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
or, did you republish after uploading?
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Whoops hold on I gave you the wrong name. It's resources/Ben/Young Ben2.png
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
the best thing to do is never use spaces when you save a file.

Is the extension correct - its not .jpg or .PNG
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Sorry again, I forgot to update my site. I check the link, it now works.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
ok, give me 10 minutes while i finish of a email - i'll be right back with your code. Lee.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
what do you wnat the caption under the enlarged image to say?
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Just "Young Ben".
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

Please make a new test page - then add this to a html widget

<script type="text/javascript">

/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* IMPORTANT: Put script after tooltip div or
put tooltip div just before </BODY>. */

var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

var origWidth, origHeight;

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

/////////////////////// CUSTOMIZE HERE ////////////////////
// settings for tooltip
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 320;
var offX= 20; // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "10pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#000000";
var tipBgColor= "#f6f6f6";
var tipBorderColor= "#89d81a";
var tipBorderWidth= 2;
var tipBorderStyle= "ridge";
var tipPadding= 4;

// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing:
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip
messages[0] = new Array('resources/Ben/Young Ben.png','Young Ben',"#f6f6f6");

//////////////////// END OF CUSTOMIZATION AREA ///////////////////

// preload images that are to appear in tooltip
// from arrays above
if (document.images) {
var theImgs = new Array();
for (var i=0; i<messages.length; i++) {
theImgs[i] = new Image();
theImgs[i].src = messages[i][0];
}
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';

////////////////////////////////////////////////////////////
// initTip - initialization for tooltip.
// Global variables for tooltip.
// Set styles
// Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
if (nodyn) return;
tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
tipcss = tooltip.style;
if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
tipcss.width = tipWidth+"px";
tipcss.fontFamily = tipFontFamily;
tipcss.fontSize = tipFontSize;
tipcss.color = tipFontColor;
tipcss.backgroundColor = tipBgColor;
tipcss.borderColor = tipBorderColor;
tipcss.borderWidth = tipBorderWidth+"px";
tipcss.padding = tipPadding+"px";
tipcss.borderStyle = tipBorderStyle;
}
if (tooltip&&tipFollowMouse) {
document.onmousemove = trackMouse;
}
}

window.onload = initTip;

/////////////////////////////////////////////////
// doTooltip function
// Assembles content for tooltip and writes
// it to tipDiv
/////////////////////////////////////////////////
var t1,t2; // for setTimeouts
var tipOn = false; // check if over tooltip link
function doTooltip(evt,num) {
if (!tooltip) return;
if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
tipOn = true;
// set colors if included in messages array
if (messages[num][2]) var curBgColor = messages[num][2];
else curBgColor = tipBgColor;
if (messages[num][3]) var curFontColor = messages[num][3];
else curFontColor = tipFontColor;
if (ie4||ie5||ns5) {
var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
tipcss.backgroundColor = curBgColor;
tooltip.innerHTML = tip;
}
if (!tipFollowMouse) positionTip(evt);
else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
// positionTip function
// If tipFollowMouse set false, so trackMouse function
// not being used, get position of mouseover event.
// Calculations use mouseover event position,
// offset amounts and tooltip width to position
// tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
if (!tipFollowMouse) {
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
}
// tooltip width and height
var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
// document area in view (subtract scrollbar width for ns)
var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
// check mouse position against tip and window dimensions
// and position the tooltip
if ((mouseX+offX+tpWd)>winWd)
tipcss.left = mouseX-(tpWd+offX)+"px";
else tipcss.left = mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt)
tipcss.top = winHt-(tpHt+offY)+"px";
else tipcss.top = mouseY+offY+"px";
if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
if (!tooltip) return;
t2=setTimeout("tipcss.visibility='hidden'",100);
tipOn = false;
}

document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

</script>

Please make a test page first. Lee. Let me know when youve done that

-->
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Lee,

I added the code to an html widget on a test page, but the image is not showing. Here the link: http://ofbenandgwen.synthasite.com/th...
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Okay, added that. Is there anymore you want me to add?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
does it work?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
publish, it wont work in the editor
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
I did, I don't think it works.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
no maybe the forum is messing with the java layout - wait - i'll test it using full urls my end see what happens. give me 5 mins.
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Thanks so much for your help with this one, Lee.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Grace dont worry we are close - once its in its in you can do whatever after this.

I think the problem is all the top java script you added is in a straight line, can you try to re add this - Lee.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
@ Grace - also try to switch the top code to the bottom of the page. (under the small picture)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Grace - the forum must mess with code -

if you email me admin@hexham.info i will send you it.

Look below - it works great