HTML - Image Thumbnails Printed As Full Size Images

I have an ecommerce website and I want to show 1 big product image, along with a number of thumbnails. I then want the customer to be able to hover over or click the thumbnails and have the thumbnail become the 'big' image.

What's the 'most compatible' way of doing this? I don't really want to go with some fancy scripted solution just to find out that half my customers can't see it because their firewall/AV/popup software etc is stopping it...

Hi members...

I am designing my new eBay advert in html using Dreamweaver CS3
I have designed many stuff in this that is pretty basic, and use the design view.

I want to develop my ads this year from a static looking page to a more advanced page.

Schuh do something similar to what I am after and I can't search the forums because I have no idea what it is called that I would like to do.

Here is a link to their advert..
[url="http://cgi.ebay.co.uk/MOMENTUM-HARRY-DBL-MENS-BLACK-GREEN-FABRIC-TRAINERS-/390316948300?pt=UK_Men_s_Shoes&var=&hash=item99accd46a3"]

notice how you can roll over images to show a larger preview, can anyone point me to a guide or at least tell me what i need to be searching for.

Thanks
John

All:

Working to update a previously designed website.

Original design uses an <img> tag to create a top banner and another <img> tag
to create a side banner.

In each case there are mapped coordinates on each banner as links for the subsequent pages.

Basic page design is as follows:

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td>
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <div>
         ***PAGE CONTENT***
      </div>
   <tr>
<table>

The challenge is that the [PAGE CONTENT] varries in length througout the site causing some pages
to be much longer or shorter than others.

This causes some inconsistencey in the relationship between the side banners height and the
page content.

In other words in some cases the banner is exceptionally longer than the page content and the
reader must scroll past significant "dead-space" before being brought to the lowest
mapped links in the side banner; or...

...in some cases the side banner is significantly shorter than the page content causing the
banner image to appear "poorly-fit" to the page design.

I considered altering the 2nd table instance in the above design so that the banner is carried
in a <td> tag that is adjacent to the page content and hopefully to allow the tag carrying the
image to size relative to the <td> tag carring the content....

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td size="100%">
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <td size="100%" >
         <table>
            ***PAGE CONTENT***
         </table>
      </td>
   <tr>
<table>

The problem I've found with this is that as the content size causes the image to "flex", either
readablilty or image quality or both are effected, AND the mappings become inconsistent as the
image coordinates constantly change.

I've considered 2 solutions and am leaning toward one, but thought I'd post this and see if there
are better ideas I'm overlooking.

One idea was to add additional table rows inside the [PAGE CONTENT] table presumably creating a
"defalut" page size that would never be smaller than a standard for the side banner.
Problem: larger page sizes are still a problem as are the changing map coordinates

My other idea was to return to the original page design listed first above and again settle on
a standard side banner "height"... ...any page that was significantly longer than that height
would be split to 2 or more pages with a [NEXT>>] button at the bottom of the page navigating to
the additional content.
Problem: ...possible complications splitting content...
Benefit: ...consistent page design that allows a consistent side banner with navigable links...


Question for the group:
Does this sound reasonable?
Are there better alternatives I am overlooking?

THANKS IN ADVANCE FOR ALL INPUT!!

Hi all
I only know very basic HTML and at the moment.

I have an image that is hosted on Buzztouch.

http://www.buzztouch.com/application...elfordboat.jpg

Now my Question

What code would I need to write so when you click on a page the image appears full screen no mater what brower you use it on. ?

thanks

There are 5 copies of the same images are placed in a folder i.e. large(1024*768),medium(500*375),small(240*180),thu mnail(75*75),square(100*50) in size....
The following code upload number of Geocoded images(square size) when the page loads.I want when someone click on the any Geocoded image on the page ,it should show the large image(1024*768) of the same.And further click on the large image it must show again the square size image of the same.
Following is the actual code.It is in .js file
.

var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var OSVMain = (function() {
var map, markers, map_move_timeout;
var photos = {};
function mapChange() {
if( map_move_timeout )
clearTimeout(map_move_timeout);
map_move_timeout = setTimeout(mapChangeTimeout, 500);
updateLinks();
}
function updateLinks() {
var center = OSV.getMapCenter(map);
var zoom = map.getZoom();
$('#permalink').attr('href',OSV.getURLBase()+'?lat ='+center.lat+'&lon='+center.lon+'&zoom='+zoom);
$('#kmllink').attr('href',getLocateLink('kml'));
}
function getLocateLink(format) {
var extent = OSV.getMapExtent(map);
var url = OSV.getURLBase()+'/api/photos/locate.'+format+'?bbox=';
url += [ extent.left, extent.bottom, extent.right, extent.top].join(',');
return url;
}
function mapChangeTimeout() {
map_move_timeout = null;
var url = getLocateLink('json');
$.get( url, null, photosLoaded, 'json' );
}
function photosLoaded(json) {
var new_photos = {};
var size = new OpenLayers.Size(50, 50);
var offset = new OpenLayers.Pixel(-25, -25);
for( var i = 0, l = json.length; i < l; ++i ) {
var p = new OSVPhoto(json[i]);
if( photos[p.data.id] ) {
new_photos[p.data.id] = photos[p.data.id];
photos[p.data.id] = null;
} else {
var position = new OpenLayers.LonLat(p.data.lon,p.data.lat);
var icon = new OpenLayers.Icon(p.url('square'), size, offset);
p.marker = new OpenLayers.Marker(position.clone().transform(epsg4 326, map.getProjectionObject()), icon);
new_photos[p.data.id] = p;
markers.addMarker(p.marker);

}
}
for( var k in photos ) {
var p = photos[k];
if( p && p.marker )
markers.removeMarker(p.marker);
}
photos = new_photos;
}
function setup() {
var vectors;
var popup;

map = new OpenLayers.Map($('#map').get(0), {
controls: [
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar()
],
units: "m",
maxResolution: 156543.0339,
numZoomLevels: 20,
displayProjection: new OpenLayers.Projection("EPSG:4326")
});

var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
displayOutsideMaxExtent: true,
wrapDateLine: true
});
map.addLayer(mapnik);

var osmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender", {
displayOutsideMaxExtent: true,
wrapDateLine: true
});
map.addLayer(osmarender);

var numZoomLevels = Math.max(mapnik.numZoomLevels, osmarender.numZoomLevels);

var start = OSV.getStartLocation();
var numzoom = map.getNumZoomLevels();
if (start.zoom >= numzoom) start.zoom = numzoom - 1;
map.setCenter(start.pos.clone().transform(epsg4326 , map.getProjectionObject()), start.zoom);
OSV.setupMapEventHandlers(map);
map.events.register("moveend", map, mapChange);
map.events.register("zoomend", map, mapChange);
mapChange();



markers = new OpenLayers.Layer.Markers("Markers", {
displayInLayerSwitcher: false,
numZoomLevels: numZoomLevels,
maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
maxResolution: 156543,
units: "m",
projection: "EPSG:900913"
});
map.addLayer(markers);

}
return {
setup: setup,
1:1
};
})();
$(function(){
OSVMain.setup();
});



Any suggestions ?
Thanking you

I need to display an image (size 1024x768) in IE explorer so when i hit f11 (kiosk mode) its full screen. Then I need that image to refresh every X seconds with out flickering on the screen.

The file is a bmp and is about 5mb and only will be changed a few times a day by a program I wrote in Vb.net. It will write over the existing file so the webpage would pick up the changes when it refreshes.

Codes I'v tried already:
Code:

<html>

<head>
<META HTTP-EQUIV="Expires" CONTENT="-1">
<META HTTP-EQUIV="refresh" CONTENT="10;URL="meta.htm";"transition">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} 
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
</style>
</head>

<body>

<div>
<img id="background" src="View.bmp" alt="" style="position: absolute; left: 0; top: 0" width="90%" height="90%" />
</div>
</body>

</html>

and

Code:

 
   <IMG src="OR View.bmp" name="refresh" Padding="0" Width="1024" Height="768" Scrolling="0"> 
      <SCRIPT language="JavaScript" type="text/javascript"> 
      <!-- 
      var t = 120 // interval in seconds 
      image = "OR View.bmp" //name of the image 
      function Start() { 
      tmp = new Date(); 
      tmp = "?"+tmp.getTime() 
      document.images["refresh"].src = image+tmp 
      setTimeout("Start()", t*1000) 
      } 
      Start(); 
      // --> 
      </SCRIPT>

However the first one flickers and the 2nd doesnt display in full screen.

Any information or even pointing me in the right direction would help. I know almost nothing about java and html =x

Is there a way to center images of changing size, without using the <div align="center">?

I have several images that I would like to center on a page with having to compute where the center is and then setting the margin to move it over.

Thanks,
Greg

Hi,

the images on my Tumblr blog (http://madeinzaire.tumblr.com/) have suddenly been reduced to a small size, although I didn't change the HTML codes.

I tried re-editing the HTML manually several times, reinstalling the theme, refreshing the page countless times but the problem is still there. I even tried creating a new blog (http://testathome.tumblr.com/) with the same theme and posted one same photo as in my original blog: in the new blog, the photos have the correct width. But in my original blog, they don't.

The strange thing is that in my blog (http://madeinzaire.tumblr.com/) the images look right on the preview, but when I save and close the "customize" box, they remain small on the blog.

If I'm not mistaken the codes for the image size is:

#content { float: left; width: 760px; border-right: 1px solid #ccc; padding-right: 0px; margin-bottom: 15px; padding-right: 20px; }

{block:IfDetailsNextToPost}
#content img {max-width: 660px;}
{/block:IfDetailsNextToPost}

{block:IfNotDetailsNextToPost}
#content img {max-width: 760px;}
{/block:IfNotDetailsNextToPost}

Can someone please help me?

(view entire code in attached file)

So I know if you use "%" to define your height and width with tables that it allows you the table to resize based upon a users browser size. My question is how can you do this with images? I tried setting my height and width for my image using "%" but then my image just becomes overly stretched. My professor said that I should create a table and than place the image within the table, and then set the table height and width using "%". The code below is what I tried. It didn't work though.

Any ideas on how to do this?

Code:

<body>
<table width="100%" height="100%" border="0">
  <tr>
    <td height="100%" width="100%"><p align="center"><img src="images/Banner.png" align="center" class="source-image" /></p></td>
  </tr>
</table>
</body>

Thank you for your help!

Ok I'd really like to design a darker them with a lot of textures like this one:

http://www.grafpedia.com/tutorials/c...o-pixel-layout

But thats just a photoshop walk-thru.

So how would you go about making a background like the one shown with a couple of different textures without making just 1 large huge image?

I'm worried about download times as I have my background image as a 1px image set on repeat.

But if I choose to have a site design like shown in that link, I cant use the 1px image size option any more, or can I?

Basically I'm lost as to how to get my site to look like the design in the link.

Here it is now:

http://acidtripmediaproductions.com/lmi/index.html

I'd like to extend the main center div to go from the top to the bottom and "Frames" all the content within it

Whats the easiest way to do that?

Would I want to keep the side bar nav where its at if I do this?

When I am printing an asp page the query string for the page is listed at the bottom of the printed page. Can I get that to NOT happen?

Thanks~

Why are my 1000 pixels wide images are ok in FF and Chrome but seem to be 1.25% larger in IE?

Thanks

I don't know what part of this html is making the pictures in my table compressed width wise but if someone could help that would be fantastic.

Here is the code:



<style type="text/css">
body,table, td, li, p, div, textarea
{font-family:Tahoma; font-size:12pt; color:ffffff; font-weight:none;}

table, td { background-color:transparent; border:none; border-width:0;}
body{background-image:url(http://i7.photobucket.com/albums/y28...onlybkgd.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:bottom right;
background-color:179f99; }

body
{scrollbar-face-color:179f99;
scrollbar-shadow-color:ffffff;
scrollbar-highlight-color:ffffff;
scrollbar-3dlight-color:ffffff;
scrollbar-darkshadow-color:ffffff;
scrollbar-track-color:87f5f3;
scrollbar-arrow-color:ffffff;}

.text {font-family:Tahoma; font-size:12pt;
color:000000; font-weight:none}

.redtext{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.redbtext{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.orangetext15{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.lightbluetext8{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.whitetext12{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.blacktext12{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.nametext{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.blacktext10{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold; background-color:transparent}

strong, b {font-weight: bold; color:000000;}

a{font-family:Arial; font-size:12pt;
font-weight:normal;background-color:transparent;}
a:link{color:000000;font-weight:bold;font-family:Arial}
a:active{color:000000;font-weight:bold;font-family:Arial}
a:visited{color:000000;font-weight:bold;font-family:Arial}
a:hover{color:000000;font-weight:bold;font-family:Arial}

a.redlink{font-family:Arial; font-size:12pt;
font-weight:normal;background-color:transparent;}
a.redlink:link{color:000000;font-weight:bold;font-family:Arial}
a.redlink:active{color:000000;font-weight:bold;font-family:Arial}
a.redlink:visited{color:000000;font-weight:bold;font-family:Arial}
a.redlink:hover{color:000000;font-weight:bold;font-family:Arial}

a.navbar{font-family:Arial; font-size:12pt;
font-weight:normal;background-color:transparent;}
a.navbar:link{color:000000;font-weight:bold;font-family:Arial}
a.navbar:active{color:000000;font-weight:bold;font-family:Arial}
a.navbar:visited{color:000000;font-weight:bold;font-family:Arial}
a.navbar:hover{color:000000;font-weight:bold;font-family:Arial}

a.man{font-family:Arial; font-size:10pt;
font-weight:normal;background-color:transparent;}
a:link{color:000000;font-weight:bold;font-family:Arial}
a:active{color:000000;font-weight:bold;font-family:Arial}
a:visited{color:000000;font-weight:bold;font-family:Arial}
a:hover{color:000000;font-weight:bold;font-family:Arial}
</style>

<style> table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 2px;}
table table table {border: 16px dotted; border-color: 87f5f3; background-color: ffffff; background-image:url(); padding:0;}
table table table table{border: 0px;}
table table table table table,
table table table table table </style>

<style>
}
table table table table {border:0px;}
.{content:"Text and Link Properties";}
input {background-color:transparent !important;}
td, div, input, textarea, a, table td div div font,
div table tr td font {font-family:Verdana !important;}
td, div, input, textarea, table td div div font,div table tr td font {color:000000!important; font-size:10pt !important;}
.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12, .blacktext12 span,.redtext, .redbtext, .blacktext10, .btext {color:000000!important; font-size:10pt !important;}
a {color:000000!important; font-size:10pt !important;text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
a:hover {color:000000!important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}

<style type="text/css">
table table table
{width:400px; !important;}
table table td img {display:none;}
table table table td img {display:inline;}
table td td {width:0px;}
table {width:500px;}
table table {width:400px; !important;}
table table td {padding:3px;}
table table table td {padding:0px;}
table table table {width:400px !important; height:0px;}
td.text td a img {display: inline !important; }
table table table table table,
table table table table table td {
width:0px !important; padding:0px !important;}
td.text a img {width:130px }
td.text td.text a img {width:100px !important; }
td td td div strong {width:200px !important; display:block;}
.redblackfonttext14{font-weight:normal}
textarea, input, font, a, table, td, div, b {font-size:10pt !important;font-family:century gothic!important;font-weight:normal!Important;text-transform:lowercase}
span {font-size:10pt !important;font-family:century gothic!important;font-weight:normal!Important;text-transform:uppercase}
embed, object {display:inline}
.orangetext15, .blacktext10 {
display:block; width:300px; font-size:10pt !important;}
td.text td.text .orangetext15,
td.text td.text table table div {display:none;}
.thanks:mrk{.}
.mct{www.myspace.com/contacttables}
</style>




Yeah it's my myspace page. Sorry I'm such a dummy at html.....

On my web site, I have images displayed in table cells. I have the width set to 100% and the table itself set to 80% width. I do that so that if the browser window size is reduced, then the table's size is reduced to fit the window without having to scroll left or right. That works great, unless the browser window is larger than what I design the page on as in if the end user is using a higher resolution monitor. In that case, the images are stretched rather than reduced to again fill the page.

Code:

<table border="0" width="80%">
  <tr>
    <td width="50%">
      <img src="image1.jpg" width="90%">
    </td>
    <td width="50%">
      <img src="image2.jpg" width="90%">
    </td>
  </tr>
</table>

Is there a way that I can set a maximum size for the images so that they don't get stretched above their intended resolution, while still using the width=xx% attribute to reduce the images to match the window?