Just a quicky.

[Massimo]

Currently working on my website (SOmething to bind time and a little fun)

I want to do something like the below picture, Could someone recommend a type of coding to use.

Thanks.

http://img825.imageshack.us/img825/7550/panic3com.th.png (http://imageshack.us/photo/my-images/825/panic3com.png/)

Uploaded with ImageShack.us (http://imageshack.us)

[iGoD ReLeNtLeS]

not sure i fully understand the layout/style of the site, whether thats a menu bar type thing etc.

But as for changing graphics on-click you could use some javascript trickery. Not too familiar with that, but i'd imagine there are some tutorials out there.

But you could use CSS to change properties when the mouse is hovered over using something along these lines


#style:hover {
background: #000 url('dir/to/image');
}

more on that here. http://www.w3schools.com/css/css_pseudo_classes.asp

a combination of javascript and css should see you sorted :thumb:

[Toonshorty]

Javascript, CSS and jQuery is probably your best bet.

[aidan2007]

Don't need javascript for an 'on click' or 'pressed' effect. Use css.

a:active {
anything in here will happen when the link is clicked
}

Also if you want a hover and a pressed state look up 'css sprites'. Basically with sprites all the different background images for the various states for the link are in one image but you change what part of the image it looks at. These cut down on the number of requests to the server.

And also have you ever hovered on a button on a website and it kind of flickers before changing? This is coz they've used separate images for each button state and not sprites and when you hover on the button it has to go load the new one. If all states are part of the same image that has already been loaded you get no flickering :)

For a link to the top of the page you use anchors. So put <a id="top"></a> at the point you want the user to return to when they click a back to top link and then for the link they click put <a href="#top">Back to Top</a>

You can enhance these using jQuery by, for example, making it slide smoothly back to the top. This gives the user a better impression of what is going on and where they have returned to than if they were just instantly taken there. Don't make it too slow though ;)

Example: http://www.electrictoolbox.com/jquery-scroll-top/

EDIT:

Here's an article on sprites:

http://css-tricks.com/css-sprites/


And here's an article with links to lots of fairly unusual navigation menus that use jQuery. They might not be exactly what you are after but some of them you might like:

http://www.dynamicwp.net/articles-and-tutorials/15-really-amazing-jquery-navigation-menu/

[Massimo]

Used some HTML to get a basic logo on my page, Just trying to get it centered..

Id CS5 anygood to work with for making web pages?

www.panic3.com If you want to check it :P

[aidan2007]

Used some HTML to get a basic logo on my page, Just trying to get it centered..

Id CS5 anygood to work with for making web pages?

www.panic3.com If you want to check it :P

Code from scratch. Dreamweaver just bloats your markup with loads of crap. As an HTML editor though dreamweaver is good, just don't let it write your code for you, that's when it becomes crap.

My workflow is to create the site in Photoshop then write the markup based on that, cutting out parts of the image as I need them.

EDIT:

Just looked at your markup and its full of inline styles. Get them out into a separate CSS file.

Also its not centered as you've given it a fixed distance from the side.

You need to make the image a fixed width and put in margin:0 auto; in the CSS to make it centered.

So give the image an id so you can target it with CSS and put in the CSS:

#imageId {
width:400px;
margin:0 auto;
}

Set body to width:100%; too or even better use a containing division.

Sent from my HTC Desire HD using Tapatalk