Thread

better than an explanation is an image

http://img.godlike.cl/images/headercopy.jpg

so I had a header image, then I added some buttons text, now I want those buttons text to be links to whatever so they act like buttons when the cursor is over them.

Im pretty new, sorry.

The way you designed this means it is not flexible, you can’t just create new categories in EE and it will then automatically create a new button. So the buttons will have to be hardcoded. You make a category, or a weblog and use that URL as a link.

Two options:

1: Use good old HTML and make an image hotspot. In Dreamweaver this is done easily. It generates something like this:

your image
<map name="Map" id="Map"><area shape="rect" coords="155,106,407,292" href="#" ></map>

2: Make a small DIV layer on top of this image with the buttons area cropped in it and link that image. You can then also make a rollover, using #div:hover, where div is replaced by the name of the layer. If you place the highlight image in that div, it will be shown when you roll over this button. This rollover does not work for IE6 and below, but let’s hope that it will become extinct ASAP. (In holland it is now down to 25%)

You could also use JAVAscript, but that is way to complicated IMHO.

Hope this all makes any sense!

I found a site that uses what I am asking for

http://img.godlike.cl/images/untitltgd.jpg

have a look at the header and how when the cursors hovers over the words they become link buttons, thats what I was trying to explain before.

Hmm I think maybe you should find another site to post as that one you have linked to should really have had a sensor warning in your post first. This could upset a few people depending upon their views of those kinds of images.

Just a thought that maybe you should maybe find a slightly less risqué site for your example if you could and then edit your existing post above?

Best wishes,

Mark

What the heck kind of website is that?  😠

Just a thought that maybe you should maybe find a slightly less risqué site for your example if you could and then edit your existing post above?

That’s an understatement!

That’s an understatement!

Well just thought I should warn everyone at least.

Would be nice if you could edit your post though maiza please?

Best wishes,

Mark

now, can you help me?

Well anyway, I’ve seen the site and that site uses the WYSIWYG functions of Dreamweaver and Photoshop, resulting in a lot of garbage.

I think they used Photoshop with the slice tool to chop the image up in table cells with HTML export. In those cells the images are all chopped up so you can link them separately. I would rather use an image map as stated before.

Found this video about Photoshop slicing:

http://www.youtube.com/watch?v=DVfxe4pqvo8

I garantuee only proper content!  😉

Well anyway, I’ve seen the site and that site uses the WYSIWYG functions of Dreamweaver and Photoshop, resulting in a lot of garbage.

I think they used Photoshop with the slice tool to chop the image up in table cells with HTML export. In those cells the images are all chopped up so you can link them separately. I would rather use an image map as stated before.

Found this video about Photoshop slicing:

http://www.youtube.com/watch?v=DVfxe4pqvo8

I garantuee only proper content!  😉

wow, I don’t know If I have the skills this requires, but I am gonna watch the vid and I tell you.

Hi maiza,

Sorry wasn’t having a go at you just thought that some people may not find that kind of site nice to look at. Anyway to do what you want is going to definitely take a bit of understanding of slicing with Photoshop or some other tool. Photoshop can actually cut everything up for you and create the HTML code but this even at the best of times can be very very messy unfortunately and so it is best to hand code as far as you can.

Making images that are roll-overs isn’t too difficult but depending on where you put them in relation to other images can make your job a lot harder. In this case it might be easier if you have a div that just holds the main image as a background to it and then place your other buttons (divs) on top of that. This too is going to be a bit of work to get it exactly as you want depending on the design you go for. If you’re not sure of how to do this kind of thing then it might be a good time for a re-think on your design. Also doing it this way does make it pretty difficult when it comes to adding new buttons or what-not as you will have to re-code again.

Hope you get it all working the way you need. Perhaps watch the YouTube video that noregt posted above and see if it clicks into place.

Best wishes,

Mark

Well Photoshop slicing is a perfect tool for straight HTML sites. So if that is what you’re after then use it.

But if you want flexible content, you need to upgrade your CSS and HTML skills I think…

Well Photoshop slicing is a perfect tool for straight HTML sites. So if that is what you’re after then use it.

Depends what you mean by straight HTML though. I haven’t used it for quite a while now as I hand code everything these days but I remember using it a few years back and the code didn’t validate and had WAY too many extra bloated lines in it.

All depends on what you are doing though I suppose. Not knocking PS as it is a fantastic program but I just think that this kind of thing can be handled much more efficiently by, as you say, brushing up on html and css skills and re-creating what you need yourself.

Best wishes,

Mark

Hi maiza,

Sorry wasn’t having a go at you just thought that some people may not find that kind of site nice to look at. Anyway to do what you want is going to definitely take a bit of understanding of slicing with Photoshop or some other tool. Photoshop can actually cut everything up for you and create the HTML code but this even at the best of times can be very very messy unfortunately and so it is best to hand code as far as you can.

Making images that are roll-overs isn’t too difficult but depending on where you put them in relation to other images can make your job a lot harder. In this case it might be easier if you have a div that just holds the main image as a background to it and then place your other buttons (divs) on top of that. This too is going to be a bit of work to get it exactly as you want depending on the design you go for. If you’re not sure of how to do this kind of thing then it might be a good time for a re-think on your design. Also doing it this way does make it pretty difficult when it comes to adding new buttons or what-not as you will have to re-code again.

Hope you get it all working the way you need. Perhaps watch the YouTube video that noregt posted above and see if it clicks into place.

Best wishes,

Mark

could you recomend some CSS, HTML book, I think I need to start from scratch.

thanks everyone.

Hiya,

Two books that I read were - CSS Mastery by Andy Budd and Bulletproof Web Design by Dan Cederholm. I must admit that I already had a fairly solid background in coding web-sites and these were more brush-up tools for me as I hadn’t really done much in the way of CSS before but now it’s all that I use, don’t know how I could live without it to be honest.

I think a lot of the dummies books might also be quite good but I don’t like reading them due to the fonts they use but that’s just me 😉

Hope that helps a bit.

Best wishes,

Mark

For the very basics I learned a lot from “Dreamweaver for Dummies”

That also has some chapters on CSS and explains the very basics of HMTL. I’ve teached HTML with this book to students.

If you don’t have Dreamweaver, there will undoubtly be a HTML / CSS for Dummies!

EDIT: found it here