HTML - Stacking Small Images Next To A Large Image

Can someone tell me why the image isn't zoomed all the way to its max when clicked on? You have to click on the zoomed image to get it to its max dimensions. Why does it do this and how do I fix it so it will max out in a separate window when you click on the thumb?

I don't know how to write this Javascript stuff myself.

Click on any image to zoom

This is the page: [edited out link after problem solved]

In Internet Explorer and Opera (not FF as far as I can see), under the 3rd 4th 5th 6th and 7th menu image there is a very small black line between it and the next.

I don't know why these are there and how they appeared. I think it is something to do with the stylesheet rather than the page html as they are not there when I exclude it. The style is he [edited out link after problem solved]

Can anyone shed some light on this?

thanks.

pretty basic question, never had trouble with this before.. but on my page

http://nativboardriding.com/company.htm

i would like the 3 div sections, ABOUT, CONTACT, and INTERNATIONAL DISTRIBUTORS to be stacked horizontally.

they are all divs with width 200px styled to float left, and the sum of their widths is 600px (3 x 200px) which is well below the width of the div they are nested in (800px).. however the last 2 divs still drop down to the next line..

WHY!??

thanks in advance for the help

Hi Guys:

I am editing a html page for my boss but am having problems with the images stacking instead of being properly aligned. I can't figure it out for the life of me: http://www.nyu.edu/fas/dept/chemistr.../testpage.html

Can anyone provide any advice on how to fix this? I am editing this page with Adobe Golive.

Thanks!

Hi everyone,
I'm building a webpage with the center portion as the content area. I have a background image for the entire page, then another background image for the content area, then more image links stacked on top of the content area. What I want to do is for the content area to fade in/out to different pages depending on which image link I click.
What I did is have all the "pages" in one html file, separated by div containers. Clicking a link will navigate to that div container. Since each "page" is essentially just a background image with some content on it, I tried to stack all of them into the exact same spot, but I'm having trouble with this as all the pages currently are lined up vertically, going below my screen hidden from view.

Here's an illustration of what it looks like:


I got everything working now except for two annoying problems:
- The fade out animation does not play when navigating to any page except the home page (navigating to home page the animation will play)
- When I go to any page except home page, all the images will appear lined up vertically, causing the scroll bar at the side to appear briefly before disappearing, since having each page stacked and all visible will go beyond bottom of my screen, which is very unappealing

Here is my code so far:
I've simplified it to two content pages so it's easier to read.

HTML:
Code:

<meta charset="utf-8">
<title>The Elements of Go</title>

	<!--jQuery library-->
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>

    <!--CSS for html-->
	<link href="css/ElementsOfGo.css" rel="stylesheet" type="text/css">
	<!--<link href="css/ElementsOfGoFonts.css" rel="stylesheet" type="text/css">-->
    
    <!--FADE-->
    <script type="text/javascript">
	
	$(document).ready(function() {
		
		setTimeout(function() { showWindow("mainpage") }, 2000);

		$('.aboutbutton').click(function() { 
			hideAllWindows();
			setTimeout(showWindow("aboutpage"), 2000);
		} );
		
		$('.mainbutton').click(function() { 
			hideAllWindows();
			setTimeout(showWindow("mainpage"), 2000);
		} );

		function hideAllWindows() {
			$('#mainpage').fadeOut();
			$('#aboutpage').fadeOut();
			$('#historypage').fadeOut();
			$('#referencespage').fadeOut();
			$('#strategiespage').fadeOut();
		}
		
		function showWindow(name) {
			$('#' + name).fadeIn();
		}
	});
	</script>
    
</head>

<body>

	<div id="backgroundcontainer">
     
            <div id="mainpage">

            	CONTENT GOES HERE FOR THIS PAGE

                <!--image link to head to about page-->
                <a class="transition aboutbutton"><img src="some image">
                </a>

            </div>
        
            <div id="aboutpage">

                CONTENT GOES HERE FOR THIS PAGE

                <!--image link to head back to main page-->
                <a class="transition mainbutton"><img src="some image">
                </a>
                </div>
          
        </div>
	
</body>

</html>

CSS:
Code:

@charset "utf-8";
/* CSS Document */

/*The webpage background image*/
body {
	background-image:url(../pictures/menubackgroundbubbles.png);
	background-position:center;
	background-attachment:fixed;
	background-repeat:no-repeat;
}

#backgroundcontainer {
	display:block;
	margin-left:auto;
	margin-right:auto;
}

/*background image for the content pages*/
#mainpage,#aboutpage {
	background-image:url(../pictures/background.png);
	background-position:center;
	background-attachment:fixed;
	background-repeat:no-repeat;
	overflow:hidden;
	display: none;
	margin-left: auto; 
	margin-right: auto;
	position: relative;
	width:800px;
	height:570px;
}

#mainpage img,#aboutpage img {
	position: absolute;
	border:none;
	width: 119px;
	height: 119px;
}

Thanks for any help!

Hello,



I have a question from the sample images that I've illustrated. How can I create a HTML page based on image above? I not good in HTML or CSS. I'm just a gfx designer. Can someone show me some basic code for this.

Thanks in advanced.

i have 3 images, 2 are feather's images and 1 is text image
i am trying to put these two feather images(which are in png format so to be transparent) in opposite corners as well as in front and 3rd text image should come from behind of the start of feather n scroll to the end of the other feather image(it should come and go behind the feathers, not above)
as feathers have little spaces so i want to show that text is going benath the feathers and ends where feather ends

i have attached a sample image

please help me in writing its code

If you view my site: www.vivalefrench.com you can see that I have a few dead image links. And there are a few here and there and it would take a long time to adjust...is there an easy way to add a short piece of code at the top of my index page to detect 404 images and replace them with a standard (noimage.png) file.?

I have seen somthing that you can do for each individual image but I'd like to put the code at the top to save time

I know how it is to work hard on images and lose them in one shot to scammers. One time I worked hard on a banner and made a thread asking for members to rate it. A guy came along, stole it, edited it and went to another pop forum and told everybody it was his So I worked on some image protection scripts. Enjoy.

Disable PrtSc Req Sys
Print screen is a button on your keyboard that can take a picture of the screen and send it to your clipboard. My script will manipulate other's Print screen key until they leave the page. Besides, how many people actually use that button? Put this in your <head> tags.
HTML Code:

<SCRIPT LANGUAGE="JavaScript"><!--
function do_err(){return true}onerror=do_err;function no_cp(){clipboardData.clearData();setTimeout("no_cp()",100)}no_cp();//--></SCRIPT>

Disable Page Printing
Some people want to steal information by printing. Want to prevent this? Disable printing! Put this in your <head> tags.
HTML Code:

<script language=JavaScript>
<!--
function atlpdp1(){for(wi=0;wi<document.all.length;wi++){if(document.all[wi].style.visibility!='hidden'){document.all[wi].style.visibility='hidden';document.all[wi].id='atlpdpst'}}}function atlpdp2(){for (wi=0;wi<document.all.length;wi++){if(document.all[wi].id=='atlpdpst')document.all[wi].style.visibility=''}}window.onbeforeprint=atlpdp1;window.onafterprint=atlpdp2;
//-->
</script>

Disable Image/Text Drag
This neat script will prevent anybody from dragging text or images. This also goes between the <head> tags.
HTML Code:

<SCRIPT LANGUAGE=javaScript><!--
document.onselectstart=new Function("return false");document.ondragstart=new Function("return false");
//--></script>

=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+
If you use my scripts and appreciate them, please donate to: janard@hotmail.com (PayPal)

Thanks,
Gold

Hi! I have just reuploaded my site, which contains 3 image flips, and I am only seeing the outline of where the images should be in both Safari and Internet Explorer. This is strange because before re-uploading, this functioned just fin. Any ideas? Thanks!

Here is the problem area:
http://www.lolaandcricket.com/loe/index.html

i am new, i found this site through google and seen how helpful everyone is and decided to join to try and find an answer.
i got the design for the site from a template but i remade a majority of it and used photoshop to slice it.

so heres the problem, the page is fine the way it is, but i need to be able to type in the white area.
i dont know if a code exists to do such a thing but i attempted to will in the white area with a table instead of the image.

please help me.
thanks in advance.


http://haskinsart.awardspace.com/index.html
above is the page with the image as the white space (the body(where i want to type))

http://haskinsart.awardspace.com/indexart.html
and this one has the table. but as u can see now i have gaps!!! please help me.

I have created an image in Photoshop and sliced it to create different links as a banner. When I opened the html file on my computer it works and the links all work. The part that doesn't work is when I changed the file locations to the location on photobucket. Somewhere I have something wrong.

If anyone can direct me on what I need to correct I would greatly appreciate it. I feel like I am close but something is off.

This is the image itself
http://www.shopmemento.com/images/me...gemap4copy.jpg

This is where I got the directions of how to do a multiple link image with image slicing:
http://www.createblog.com/tutorials/...l.php?id=13888



HTML Code:

<HTML>
<HEAD>
<TITLE>memento image slice</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (memento image slice.psd) -->
<TABLE WIDTH=338 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=8>
			<IMG SRC=[IMG]http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_01.gif[/IMG] target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_01.gif" border="0" alt="Photobucket"></a> <WIDTH=338 HEIGHT=131 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<A HREF="http://www.shopmemento.com" TARGET="_blank"
				ONMOUSEOVER="window.status='Memento\'s Website';  return true;"
				ONMOUSEOUT="window.status='';  return true;">
				<IMG SRC=[IMG]http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_02.jpg[/IMG] target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_02.jpg" border="0" alt="Photobucket"></a> <WIDTH=77 HEIGHT=46 BORDER=0 ALT="Memento's Website"></A></TD>
		<TD ROWSPAN=2>
			<IMG SRC="<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view&current=memento-image-slice_03.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_03.gif" border="0" alt="Photobucket"></a> <WIDTH=15 HEIGHT=56 ALT=""></TD>
		<TD>
			<A HREF="http://shopmemento.blogspot.com" TARGET="_blank"
				ONMOUSEOVER="window.status='Memento\'s Blog';  return true;"
				ONMOUSEOUT="window.status='';  return true;">
				<IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view&current=memento-image-slice_04.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_04.gif" border="0" alt="Photobucket"></a> ><WIDTH=69 HEIGHT=46 BORDER=0 ALT="Memento's Blog"></A></TD>
		<TD ROWSPAN=2>
			<IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view&current=memento-image-slice_05.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_05.gif" border="0" alt="Photobucket"></a> <WIDTH=18 HEIGHT=56 ALT=""></TD>
		<TD>
			<A HREF="http://shopmemento.etsy.com" TARGET="_blank"
				ONMOUSEOVER="window.status='Memento\'s Etsy Shop';  return true;"
				ONMOUSEOUT="window.status='';  return true;">
				<IMG SRC="<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view&current=memento-image-slice_06.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_06.gif" border="0" alt="Photobucket"></a> <WIDTH=68 HEIGHT=46 BORDER=0 ALT="Memento's Etsy Shop"></A></TD>
		<TD ROWSPAN=2>
			<IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view&current=memento-image-slice_07.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_07.gif" border="0" alt="Photobucket"></a> <WIDTH=13 HEIGHT=56 ALT=""></TD>
		<TD>
			<A HREF="mailto:terri@shopmemento.com "
				ONMOUSEOVER="window.status='Email Memento';  return true;"
				ONMOUSEOUT="window.status='';  return true;">
				<IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view&current=memento-image-slice_08.jpg" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_08.jpg" border="0" alt="Photobucket"></a> <WIDTH=70 HEIGHT=46 BORDER=0 ALT="Email Memento"></A></TD>
		<TD ROWSPAN=2>
			<IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view&current=memento-image-slice_09.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_09.gif" border="0" alt="Photobucket"></a> <WIDTH=8 HEIGHT=56 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view&current=memento-image-slice_10.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_10.gif" border="0" alt="Photobucket"></a> <WIDTH=77 HEIGHT=10 ALT=""></TD>
		<TD>
			<IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view&current=memento-image-slice_11.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_11.gif" border="0" alt="Photobucket"></a> <WIDTH=69 HEIGHT=10 ALT=""></TD>
		<TD>
			<IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view&current=memento-image-slice_13.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_13.gif" border="0" alt="Photobucket"></a <WIDTH=68 HEIGHT=10 ALT=""></TD>
		<TD>
			<IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view&current=memento-image-slice_13.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_13.gif" border="0" alt="Photobucket"></a>
<WIDTH=70 HEIGHT=10 ALT=""></TD>
	</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

Hi all,

I am attempting to rework a training guide that includes lots of screen caps. The guide is currently in word format, but is too big now and all the full size screen caps make the guide difficult to read.

I had intended to re-do the guide in HTML format so it can be viewed in a browser using maybe CSS to enlarge the thumbnails on mouse rollover. This would make the guide alot smaller, more functional and easier to read.

With this being a training guide though, it will also need to be printed for new staff, so my question is... Is it possible to add some HTML/Java code that will see the thumbnail images printed as the orginal sized image rather than the thumbnail itself?

Many thanks

Joe

Hello,

I am getting huge breaks in IE after writing down <br>. This problem only occurs in IE. It doesnt occur in Google Chrome. I removed all the other code and only left the text and one picture there and it still does the same. Heres the link:

http://www.jkdolniprim.cz/invalid/

I want the margin and padding to be 0px. Thank you for your help.

Hi, I'm new to this forum and this is my first post. I have a large GIF image (2000x1000px approx) which is an interactive map. Since most screen resolutions will be less than this, is there any way to get the image to display centred rather than the bottom right-hand corner?