HTML - How To Make An Image Expand Onmouseover

Yeah, it's probably a real simple question but it's bugging the heck out of me.
I'm trying to design my first layout (hence why it looks so simple), but it's not working out.

Here's the layout: http://www.lifeschronicles.net/index_test_brown.html

I want the content boxes (pale brown) to run all down the page.

How do I do that?

Please help.

Edit: Ok I have finally realised what I need to do. So simple! Haha. Can ignore/delete this thread if you want to. Sorry guys!

Hi. I am making a template for my site, and i really need my title image to display at the very top of the page, so the top of the image touches the bottom of the tool bar of the browser. This is currently what my page looks like www.skyhigh3d.com/testpage.html
I would like the top of the black image to touch the top of the browser, so there is no background visable above the image.
The image and navbar are in a table, so really i need to table to be at the very top. I know this is possible becuase i have seen many sites with the image at the very top, but no matter what i do it doesnt seem to work.

Your help would be very much appreciated.
Thanks
-JC

Ive got this nice 900x600 transparent background for my website.. but its 1,2 MB large......

Im guessing its too large to load in an acceptable amount of time..

So, ive tried saving it for the web & devices.. and, well.. PNG 8bit sucks.
It doesnt support transparancy?

Anyone know what to do? What program to use?
I want to keep the quality, dimension, and format (since PNG is the only one who supports transparent shizz right?)

Cheers,
thank you

Hi Guys i have this image and i wont to add a link to it so it will take the user back to the home page,

Would some one be able to help me? im aware this is pre amateur for some...

Heres the snippet.....

HTML Code:

 <table width="850" border="0" cellpadding="0" cellspacing="0">
                            <tr style="height: 110px">
                                <td style="background-image: url(/images/logo.png); background-position: left top;
                                    background-repeat: no-repeat">
                                </td>
                                <td style="background-image: url(/images/ssl.png); background-position: right top;
                                    background-repeat: no-repeat">
                                </td>
                            </tr>
                        </table>

I wont to add the link to the image "Logo.png" any suggestions or examples?

Thanks for looking..

Hiya, I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs.
This is example of what I mean:


Thanks

Instead of using width/height in pixels to make an image smaller, is it possible to make it 50% its size?

Hey guys,
Let me first introduce myself (even though I've been on this site since 2004). I am Matt. I have used this site in the past with confidence and have always gotten excellent answers and responses. Therefore I am back here as a first resort to seek a kind user that would help me with a problem I have.

I have a web site design that I have been fumbling over for ages in order to make it into a working web site. The problem is that I've tried so many times to realise the designs I make, but I find that my ambitions fly way ahead of my skills. Even when I spend countless hours with WYSIWYG editors, I find that WYSI-Not-WYG. (especially when you'd like the code to be as neat as the design)

I have attached an image of the design I have slaved over and I am looking for a kind soul that would magically turn it into a functional web page. Another problem is that I have a budget of nothing, yet I will mention you/your site anywhere I can as appreciation for your help.

For those of you who want to tell me that I'm crazy and to do it myself, go ahead, I'll keep trying, but I thought that this would lighten the load considerably. :3

I look forward to the responses and if anyone wants to take up the challenge, THANK YOU. Also, I will PM the separate elements for the page on request.

Thank you again in advance!

There are a couple of issues that I know of regarding this design... IE and Firefox both render the page differently, for example, the header and footer needs to be transparent (alpha). In Firefox, it renders correctly, but IE5 renders the transparent areas as white, therefore the png may have to be exchanged for a flash object with transparent wmode. Another thing that both browsers have problems with is the DIV positioning, it seems as though there needs to be a code hack in order for IE and Firefox to place the DIVs in the center of the page (I gave up trying when I couldn't get the DIVs to stop placing themselves in ridiculous positions. The shadow you see on the stripes? I have no idea how to get them onto the page considering the transparency problems in IE, but I have seen many sites achieve it, I just don't know how. I will make a shadow upon request though according to what is needed. I am willing to help as much as you help

Hi all, I'm trying to make my background (which contains my logo and site name) to be clickable to my site's URL. Seem to be having difficulty because I am using a modified WordPress template along with linking to a stylesheet. Not very good or familiar with php and css, unfortunately. Anyone have some energy to crank this one out with me?

sorry for being vague in my initial post.

Here is the header php code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[TITLE]</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
</head>

Here is the css code:

.header{margin:20px 0;}
.header .top{background:url(images/logo-graphic.jpg) top left no-repeat; height:120px; width:960px; margin:20px auto;}
.header .top #secondary{float:right; width:468px; height:60px; margin:20px 0 0 0; border:1px solid red;}
.header .navigation{background:url(images/navigation-bar-bg.png) top left repeat-x; height:61px;}
.header .navigation .nav-wrapper{width:960px; margin:0 auto; height:49px;}
.header #searchform{float:right; width:325px; height:40px; margin-top:6px;}
.header #searchform #s{font-size:14px; padding:6px 4px; border:1px solid #666; outline:none;
-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;
-moz-box-shadow: inset 0px 1px 3px #888;-webkit-box-shadow: inset 0px 1px 3px #888;box-shadow: inset 0px 1px 3px #888;
}

Hi people, I've search the net regarding this issue and from what I've gathered, images can only be transparent provided it's in the gif format. May I know is it possible to make png pictures transparent? I heard that's possible with IE 7, but I want a method that works with lowers versions of IE too.

I'm trying to avoid CSS if possible, is there a code something like "style=transparent" that can be typed into the <img> tag?

Thanks

Hello all, I'm a newb at html, just started some basic coding last week. I've made my first site, though as you can see, the images and text (even if it's a placeholder right now) aren't lined up, and I'm not sure how to tell it to do that. Anybody with more expertise understand my situation, and how to fix it? Thanks!

http://elliottetzkorn.com

alright, i have an ad (which is in an iframe from the advertiser) on the right side of my site thats a little bigger (by 30px) than the rest of the content on that side.

http://www.greendayauthority.com/

You'll see it on the rightside. You'll also see how because it's bigger, it forced that cell it's in to stretch, and pushes the other stuff to the side (you can see that by looking at the top banner, and how it's smaller than the content when they should be lined up).

What i want to do is maybe place that ad in a div or something so that it'll hang over the right side of the table, instead of pushing the other things away from it.

Can anyone help me out?

Hey. I'm relatively new to web design. I've made a gallery of photo's using this code:

<INPUT type="image" src="image.ext" onClick="window.open('http://www.website/image.jpg,'mywindow','width=400, height=600')">

because I wanted all photo's to pop up in a new window, and with specified dimensions. This code works great, but I want to have the "rolleover" effect, where you can put the mouse over it and it changes the photo, such as with this code:

<body>
<a href="zstore.html" onmouseover='rollover.src="http://ollertonmusic.com/images/ministudio1.jpg"' onmouseout='rollover.src="http://ollertonmusic.com/images/ministripes.jpg"'>
<img src="http://ollertonmusic.com/images/ministripes.jpg" name="rollover">
</a>

I want to be able to have the image have the "rollover" effect when the curser touches the photo, AND open in a new window with specified dimensions. And I'm wondering where to add in the ALT tag. Thanks!

Hello, I am not familiar with coding of any sort, so if someone could just paste the appropriate code for my needs, it would be a lifesaver! And then I could just edit to fit my context...

I want a selection form using what you all refer to all "radio options". However, when someone clicks on an option, I want an image off to the side of the option to change. So each selection would have a different image to appear.

Is there any type of general code anyone could paste that would do that and I could just edit the image location and options, etc?

Thank you all for all your help and time!

I want to know how do we expand a row when mouse moves over that particular row?and moves back when moves out of it
Is this possible with event handlers ????

Can someone help me ? I have a table on a site and I want, by clicking a button, to expand the table down then, by pushing the button again, or other button, to return to its initial size.
Thanx.