Ajax Image Size

not sure, but I would like to know this too. :)

I changed it to use the Large Image but I did have to do a lot of tweaking to the width in several places and had to edit the PNG files to accomodate the size change.
So here's what I changed. I'll try to be as accurate as possible, but I don't remember everything I dinked around with.

***Remember - DUPLICATE or COPY your original files before editing them. Sop you can always revert back incase your edit doesn't workout for you.

pc/xml_getPrdInfo.asp -
1. I changed what Netprofits told us to change.
pc/ei-tooltip.css -
1. Changed anything that had 285 px to my new width of 355 px. (355px is the size i chose to use because my ajax pic is now 300x300px.)
2. Also changed the [code] .mainbox img padding: 3px [code] instead of the 5px. Just so the window would wrap around closer to the picture.

pc/ei-tooltip.js - I changed several things here. Most of which had to do with the width of the images to accomodate the new 300px wide image.

1. Changed the ajax arrow to be closer to the pop-up. Mine was 54.
[code]  var offsetdivfrompointerX=50   [code]

2. Changed the old widths to the new 355 width. I didn't change anything else in the following code.

[code]
document.write('<DIV id="dhtmltooltip">')
    document.write('<DIV><IMG id="topbox" style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/topcap.png\'); WIDTH: 355px; HEIGHT: 21px" src="images/pngfix.png"></DIV>')
    document.write('<DIV id="titlebox" style="background-image:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/titlemiddle.png\');"><div id="tcontent" style="position:relative; padding:5px 0px 7px 20px; width: 355px; text-align: left;"></div></DIV>')
    document.write('<DIV id="boxcontent" style="background-image:none; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/contentmiddle.png\'); POSITION: relative"><div id="mcontent" style="position:relative; padding:5px 0px 7px 20px; width: 355px; text-align: justify;"></div></DIV>')
    document.write('<DIV><IMG id="bottombox" style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/bottomcap.png\'); WIDTH: 355px; HEIGHT: 25px" src="images/pngfix.png"></DIV>')
    document.write('</DIV>')
    document.write('<STYLE>')
    document.write('#boxcontent{width:355px; background-image:url(\'images/contentmiddle.png\');}')
    document.write('#titlebox{width:355px; background-image:url(\'images/titlemiddle.png\');}')
    document.write('</style>')

[code]

3. Changed the following code to the 355 px "width" and if it had width after the word "padding" then I changed that to 300 because it made the whole pop-up slimmer. I didn't change any of the px which were 5, 0, 7, 20 or 21... just the really large px numbers.

[code]
document.write('<DIV><IMG id="topbox" style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/topcap.png\'); WIDTH: 355px; HEIGHT: 21px" src="images/topcap.png"></DIV>')
    document.write('<DIV id="titlebox" style="background-image:url(\'images/titlemiddle.png\'); width:355px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/titlemiddle.png\')"><div id="tcontent" style="position:relative; padding:5px 0px 7px 20px; width: 300px; text-align: left;"></div></DIV>')
    document.write('<DIV id="boxcontent" style="background-image:url(\'images/contentmiddle.png\'); width:355px; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/contentmiddle.png\'); POSITION: relative"><div id="mcontent" style="position:relative; padding:5px 0px 7px 20px; width: 300px; text-align: justify;"></div></DIV>')
    document.write('<DIV><IMG id="bottombox" style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, sizingMethod=\'scale\', src=\'images/bottomcap.png\'); WIDTH: 355px; HEIGHT: 25px" src="images/bottomcap.png"></DIV>')
    document.write('</DIV>')

[code]

Images: pc/images/bottomcap.png, pc/images/contentmiddle.png, pc/images/titlemiddle.png, pc/images/topcap.png
After playing with the sizes and everything, I needed to change the PNG files to match the sizes which I decided upon. I choose 355 so, you must adjust the PNG files above to the width which works for you. (DUPLICATE the image files before editing them) I use Photoshop CS2 to make the changes to the PNG files. Just open the files, then select "Image>Image Size" then simply enter the new width you need them to be. This will extend your images and keep the aspect ration the same. Now re-save these images and replace the old ones.

Uploading:
Now upload the newly edited PNG images and your edited files to your site and replace the files with your new ones.

You should be all set! If for some reason things don't line up or they stick out from your box, just tweak the numbers around.

Disclaimer:
You can always revert back to your original files which you duplicated if you don't like the way it turns out.
I will add that for some reason when I hover over an image or detail button from the right side of the page and the pop-up has to load to the left of the mouse pointer my pop-up blinks like crazy. I don't know why that is.???
Any ideas would be helpful.

Good luck and let me know if it works for you, too!
You can see mine in action here: www.fidjiti.com
P.S. Don't copy the code above because it won't paste correctly, it's just for reference so you can all see what numbers and where I changed them.


Edited by fidjiti - 30-May-2007 at 4:03pm

Thanks, I have also been looking for a way to do this.

It worked just fine: www.jewel.se -

Thanks again,

Anna / Sweden