Jscript/html/css Code Help irritating gaps in spliced image

[organicbmx 0]

Here is a link to one of the pages i am designing for my parents business website. all the other pages - except the main page - are just imagemaps. this page and the main are spliced images - the main contains a iframe blog - but in this one in xp/ ie and firefox/ all the images are pulled apart

the idea for the page is that the user mouse-over's the cartons and the blank box of grass in the bottom has the details of the product printed in it. i am totally able to git rid of the splicing if nessisary and use div's but i cant figure how. could someone help me stop those white lines from ruining my page. thanks

[clagnol1405241508 0]

Your problem probably lies in the table code. I'm sure you could fix it if with minimal adjustments after you found the problem, but...If I were you, I'd redo the whole thing in CSS. You can absolutely position all the images and use the a:hover pseudo-class to create rollovers instead of using all that javascript. Then, not only would your white space problem be solved, but people with javascript disabled could see your effects as well.Some people at Xisto have written tutorials on a:hover menus, and I recently wrote one on a:hover rollovers with images, so those might help you if you're interested in solving your problem that way.

[abhiram 0]

Your problem is with the way you sliced up the table. How did you do it? I don't think you used photoshop or fireworks for it. I would suggest you use one of them and slice them up correctly. I've downloaded the html file and it's in a mess with all the cells of the table arranged haphazardly. If you don't have photoshop, PM me and I'll slice them up for you in photoshop. But, from what I see, after the page loads up completely, the lines disappear and the page looks fine in firefox. Hope this helps you out.

[organicbmx 0]

no - i used paint shop pro 7 or something rubbish. yeah im not sure about that loading then slotting into place. that was what was happening then it stoppeded happening on my pc and it definatly doesnt work on ie, also ie thinks the jscript it trying to install a virus or something stupid!!!im gonna look at the css a:hover class - sounds interesting. css is the way forward in web design.thanks for the help both.

[Hercco 0]

Although I'm a bit of a table-hater, tables actually work really well in these. Better than full CSS positioning in my opinion.

 

CSS positioning would be great but as the compliency with different browsers varies so much it is a real pain in the *bottom* to do when you must have everything at right place.

 

So for sliced image maps, tables are okay, but use CSS to position the elements inside the cells and to get rid of unneccessary paddings and borders and such.

[organicbmx 0]

im gonna try to remake this using tables and then using css a:hover classBut how would i get the css to make the rollover affect the other part of the image? (or could i do some strange css posisioned div on the rollover) Basically does DOM work with the a:hover or is that only jscript? If dom does work then what would the code look like? If DOM doesnt work then what would the code look like?

[organicbmx 0]

ignor my last post. ive done some work on this an i have got to a problem. i need to be able to give a a:hover action to a area on a imagemap.

<MAP NAME="product"><AREA SHAPE="rect" COORDS="39,39,186,477" HREF="#"><AREA SHAPE="rect" COORDS="195,36,342,477" HREF="semi"><AREA SHAPE="rect" COORDS="363,36,513,480" HREF="skim"><AREA SHAPE="rect" COORDS="519,243,678,486" HREF="cream"></MAP>

how can i set a class onto each area on the image. I am trying to use the same technique as abhiram used to make his full css layout ideas. He uses some <span> tags to put blocks of text into a position:absolute placement.

his css layout

i am attempting to do like he had for his menu extra texts but onto of the image of the page.

help will be very much appresiated, thanks in advance

[clagnol1405241508 0]

I would assume you could simply specify a class for each area with

<area class="whatever" ...

but I used a different method in my dealings of this sort. I would refer to the tutorial I wrote a while back about CSS image rollovers, but it appears it's been deleted. If you want to see how I did it, look at the source code of http://forums.xisto.com/no_longer_exists/.

Note that I didn't use the area tag, but rather specified a position in the style attributes.

That having been said, using Areas might be easier. I have yet to test that method, however.

[organicbmx 0]

thanks

but becasue i am tring to use the idea from abhiram with this

area#product span {display:none;}

and the doing this

<area id="product SHAPE="rect" COORDS="39,39,186,477" HREF="#"><span> text is need to insert </span></area>

and using this

area#product:hover span {*--text formattingand positioning--*}

but this wont work becasue the area tag doesnt close like this.

how can i make this work/ use a different method to hide and show the text???

thanks