New to Web Design

fudpeX

Forum Fiend
Joined
Jul 21, 2009
Messages
746
I'm pretty new with web design, and I was just wondering what everyone though of this. It's a little rust, and some of the images are a little off, but what do you think about the concept I'm going with.

Note: Some of the links don't work either, I haven't made those pages yet.

http://keatonkedigh.com/project.html

ohh yeah, It's for a class too. Web Design 1010. Entry Level.
 
Last edited:
One suggestion: Javascript used to create something as simple as an image rollover is really obstructive. I would go with Cascading Style Sheets, not Javascript. Another thing I noticed is that the image appears to be all sliced up, and random blue gradients in all kinds of random places. (look here)

Also, "untitled document"? What type of title is that? :D
 
Last edited:
One suggestion: Javascript used to create something as simple as an image rollover is really obstructive. I would go with Cascading Style Sheets, not Javascript. Another thing I noticed is that the image appears to be all sliced up, and random blue gradients in all kinds of random places. (look here)

Yeah, there are a lot of imperfections. Do you guys know how to make one image multiple rollover links?its also just a project I'm working on for class. Consider this a "rough draft" or even an outline.
 
Looking good, the outlines could be a little bit more centered.
 
Yeah, there are a lot of imperfections. Do you guys know how to make one image multiple rollover links?its also just a project I'm working on for class. Consider this a "rough draft" or even an outline.

The hover property in CSS. You can also use a sprite to make it load faster. Make the picture the background of a (preferably large) div element. Make the positioning of this container div 'relative'. Slice up the picture to get the sections you want to make glow, and put them all in the same picture. On the same picture, put the images you want of what you want it to look like when you mouse over those elements.

So to make it clear, you have the background image, and the image with the sections you want changed, and what they will look like changed. Two image files.

Now you make some divs within the background image div, and make those have absolute positioning, and move them to the exact spot you want. To ensure that it looks the same across all browsers, do a CSS reset (* {padding: 0; margin: 0;}).

Once you have those divs in place, add a hover property that changes the location of the image from where it is normally to how it should be when it's hovered over.

To give you an example with code, here is something I did for a class.

And this is what a sprite looks like to make things even clearer:
sprite.jpg
 

Latest posts

Back
Top