image size for multiple images?

Okay, I am very new to CSS, and I'm having a sort of problem. I have one image I want to be large and several others I wish to be small. Whenver I add a image piece into the style sheet it will make ALL images that size...how do I change the size for the images individually?

 

Basically, how do I set the size, posistion, etc of individual images?

 

come on people...

 

you should not be using css to set image sizes. You should be setting the attributes in the img tag (height and width), and for best results your images should be actually sized accordingly.

If you set a picture to 80x60 and it's actually an 800x600 image, the user will have to download the full sized 800x600 file in order to view it as an 80x60 image - and you are trusting the browser to resize the image for you, which isn't a good thing.

 

hmm...thanks. Well, how do I position images (with more than one image)?

 

come on people...I know this is basic, but I want to learn. I've looked up many tutorials and non give any background on this. How can I have one image with one position and another with another, etc?

 

You could do something like

<img src="big.gif" class="bigimage">
<img src="small1.gif" class="smallimage">
<img src="small2.gif" class="smallimage">
<img src="small3.gif" class="smallimage">

Code (markup):

and in your CSS file

.bigimage { width: 500px; height: 500px }
.smallimage { width: 100px; height: 100px }

Code (markup):

or similar

 

Thank you. That's what I was looking for for the most part...but now I've come across another problem.

Some of the images I wish to position are using javascript onMouseOver to switch between images...and whenever I assign it a class and position it doesn't onMouseOver and it isn't positioned. Help would be appreciated.

CSS code;

.home
{
position:absolute;
top:100px;
left:450px
}

Code (markup):

JavaScript code;

<a href="" onMouseOver="document.pic1.src='myimages/home.bmp' class='home'"
        onMouseOut="document.pic1.src='myimages/home2.bmp' class='home2'">
    <img src="myimages/home2.bmp" border=0 name="pic1"></a>

Code (markup):

Thanks again

 

Group your images and use CSS classes or IDs for individual images. For example:

CSS:
img.small {width: 40px; height: 40px;}
img.large {width: 100px; height: 100px;}
img#img1 {width: 123px; height: 123px;}

HTML:
<img class="small" ...>
<img class="small" ...>
<img class="large" ...>
<img id="img1" ...>

J.D.

 

that answers my first problem but if you look above (the post before yours) you'll see that I'm using javascript...whenever I asign it a class it doesn't work (when with javascript.)

 

Try this

<a href=""
onMouseOver="document.pic1.src='mypicture1.png'; document.pic1.className='home';"
onMouseOut="document.pic1.src='mypicture2.png'; document.pic1.className='home2';">
<img src="mypicture.png" border=0 id="pic1"></a>

J.D.

 

no luck...

 

If you want people to help you, you should be more specific.

Anyway, you must be using IE (I guess, I should've figured this out from your BMPs). Use this:

<a href=""
onMouseOver="document.getElementById('pic1').src='mypicture1.png'; document.getElementById('pic1').className='home';"
onMouseOut="document.getElementById('pic1').src='mypicture2.png'; document.getElementById('pic1').className='home2';">
<img src="mypicture.png" border=0 id="pic1"></a>

J.D.

 

Thank you very much---your help is greatly apprecaited. I got it working now.

Oh, and just a side note--- I'm using AOL and not IE...and I'll change redo the pics soon to png.'s. I was just trying to get it work for now.

thanks again!

 

AOL is probably using IE internally anyway.

 

well, I guess I spoke too soon....

It'll show an 'x' on the left and then when I go over it the image will appear where I want it as will the onMouseOver image. But when I first load the page all of the images appear in the square with the x (I beleive which is used to indicate broken links)

 

Yes, it's a broken link. Check your paths to the image files.

 

well there aren't any broken links though---they're correct. I've doulbe and tripple checked them.

Besides, it wouldn't show the images after hovering over the 'x' if it was a broken link (would it)

*sigh*

 

Try it with another browser. If it doesn't work, post your resulting HTML and I will take a look at it.

J.D.

 

or try uploading the images