Trying to add this to my site

[williamswoodworks]

Good morning all,
I have been trying to add this to my site since i will have a pretty good hand full of images on my site.

http://randsco.com/_miscPgs/cssZoomPZ3.html

It is an image zoom I'm not too sure how to go about adding it into my page so it works.

Can ya help a newbie?

Thank you all
Jesse

[Collectors-info]

Re: Trying to add this to my site

Hi, must admit I couldn’t seem to alter the left or right justify of the pop up image with the one you pointed out. But if it helps there some here with better instructions.
Good luck.

http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

[williamswoodworks]

Re: Trying to add this to my site

Thanks for those. i think i am going to try and use the third one.

Couple questions about the third one.

When i create an html box and click on the html properties i would insert the first portion of the script in the head tag. There are a couple different names in bv when you go to the html portion.

Then after that is placed i can then put the 2nd script in the body tag and link my image with it. I can make thumbnails as my roll over to a larger image.

Would i just link the html to my image folder on the server?
/imagefolder/pic1.jpg

Thanks
Jesse

[Collectors-info]

Re: Trying to add this to my site

(Don’t use the code below, its just a sample)

Hi enter
Step 1 code: Go to View>Page HTML>Between the head tag. & paste it in here.
For each popup you want, you will have to enter one extra line of code in the header area
Notice! I have highlighted a blue line for an extra pop up I have added. This line of code will be message 3 with the link as message 2. If you add another line of code it will be 3. & so on for as many as you wish. (A bit confusing because it all starts on a Zero) The bit in green is where your image url will go. The bit in orange is for your text under the image


/////////////////////// 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= 160;
var offX= 20; // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
// 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= "#DDECFF";
var tipBorderColor= "#000080";
var tipBorderWidth= 3;
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('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
messages[2] = new Array('test.gif','Test description','black','white');


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

Step 2 Code: (Like one of the lines below) will go on the front of the page via placing a HTML box on the page & d/click on it & a pop up will appear. Paste it in this html properties box. & move to where you want it on the page. Remembering to change the event number to match the code you placed in the header.


<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a>

<a href="#" onmouseover="doTooltip(event,2)" onmouseout="hideTip()">Link 3</a>



Good luck.

[williamswoodworks]

Re: Trying to add this to my site

Ok I'm trying here. I have copied the 1st portion of the script into the between head tag. changed the area where the image goes by linking it to the image folder on the server.

Now i am at the second part. i have created a html box as stated dbl/clicked and pasted the script into the html properties box. Now this is where i am having some questions: where the event number is 0 do i need to copy and paste the new array portion where the 0 is located? also i would like for it to be a thumbnail picture for the mouse to roll over instead of the words link 1 link 2 is this possible?

Also it is really taking my page a long time to publish, usually it is lightning fast?

Thanks from a newbie
Jesse

[Collectors-info]

Re: Trying to add this to my site

Hi, with the image link, i asume you mean the image file & not folder? Depending on the names of your folder the image link should be something like /images/my-image.jpg or you can use the full url.
The "0" parts is purely so that when the link is clicked on, it is giving an instruction to call up the items in the header part of the script that is called "0" . So the only change here would be having 2 matching numbers in the head & body.

If you would like to replace the text with an image. It will look like this.

<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()"><img src="http://www.dynamicdrive.com/ddincludes/logo.gif" border="0"></a>

Good luck.

[williamswoodworks]

Re: Trying to add this to my site

Thanks so much for the help got it up and running this am. Then i transfered all the scrip to word and your explanations so i would not forget. My pages are publishing again. maybe last night my computer was on the fritz!

Thanks again
Jesse

[Collectors-info]

Re: Trying to add this to my site

Ah! Looking good, well done. May want to pop some color behind the text. Looks a little lost when over other words. Or you can ajust where the image will pop up in relation to the mouse by adjusting part of the head code.
The parts in blue (the numbers) will make the pop up closer or farther from the curser. But it will do the same to all popups on that page.

Good luck.

var tipWidth= 160;
var offX= 20; // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";