HTML help

[sash1]

How do you make on mouse overs? Say my link is: <A HREF=www.anandtech.com>Anandtech</A>

Well, how do I make it so when you put the mouse over it the BGCOLOR turns to say red, FF0000 from white, FFFFFF?

And to maximize space, how do I make pictures smaller? Like only show a part of a picture and then you can click it to enlarge? Do I use javascrips? if so how? say I have <IMG SRC=dog.jpg>, how would I make it so it only shows a fraction of that dog picture?

~Aunix

 

[sash1]

nm, figured out the onmouseovers, but I still need to knwo the seconds part...

and I knwo we aren't supposed to use HTML on the forums, I just need help and I have no other place to ask, I hope this is fine.

Thanks,

~Aunix

 

[joinT]

to make the links change colour when you roll-over, you need to use Cascading Style Sheets

i believe you are speaking of "thumbnails" ? ie. smaller, sometimes cropped images for linking to the full-size image.
if you want to crop them, you need to do it manually.
if you just want smaller images, use Photoshop Actions to resize a batch of them.

 

[FOBSIDE]

<< And to maximize space, how do I make pictures smaller? Like only show a part of a picture and then you can click it to enlarge? Do I use javascrips? if so how? say I have <IMG SRC=dog.jpg>, how would I make it so it only shows a fraction of that dog picture? >>



you have to crop them yourself ai believe and actually have a small image unless you want to just squish the image into a small dimension, which is not a good idea because even though the dimensions are small youre going to have the long load time still because its the same larger file. if you host your pages from a linux box, theres a build in script that does thumbnails for you. i dont remember what its called though. if you ask around in these forums i know someone will know.

 

[sash1]

Cool thanks. As of now i'm just taking the easy way out and shrinking them <WIDTH=50 HEIGHT=50>, etc.

Thanks a lot,

~Aunix

 

[FOBSIDE]

<< Cool thanks. As of now i'm just taking the easy way out and shrinking them <WIDTH=50 HEIGHT=50>, etc.

Thanks a lot,

~Aunix >>



that might take a while to load if you have quite a few of them and theyre large images. hope it works ok tho.

 

[KB]

You can also change colors using javascript:

<a href="www.anandtech.com" onmouseover="this.style.color='FF0000'" onmouseout="this.style.color='FFFFFF'" >Anandtech</A>

 

[stndn]

including WIDTH and HEIGHT in your IMG tag does "minimize" the image, but only how you look at it
but in reality, you are viewing the "real" file, which means you are "tricked" to thinking the image is smaller

what i mean, suppose you have an image of size 300x600 which is 800kb in size
then you use <IMG SRC="image.jpg" WIDTH=50 HEIGHT=100>
people will see the image as 50x100, but they still need to download 800kb of data, since that's the size of the file

but if you create a separate image, let's call it "image_small.jpg", of size 50 x 100 and 300kb
you can use <A HREF="image.jpg"><IMG SRC="image_small.jpg"></A> so that when a person goes to your webpage, s/he only needs to download 300kb of data and see the smaller image, unless s/he clicks on the link, which will take her to the real image and get additional 800kb of data

that's how thumbnails are usually done... not just a simple WIDTH and HEIGHT manipulation, but editing the real image (save us 56k-ers when we just want to see the sample of the image)

one comment on your task in changing background color onMouseOver (using JavaScript)
most people think that's annoying, since it changes the look of the page when you hover your mouse pointer above a link... it's up to you, but personally i would avoid it unless you have a reason to do so...

-968-