Jscript/html/css Code Help

organicbmx

Sep 10 2005, 12:49 PM

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

Comment/Reply (w/o sign-up)

clagnol

Sep 13 2005, 03:46 AM

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 Astahost 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.

Comment/Reply (w/o sign-up)

abhiram

Sep 13 2005, 03:59 AM

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.

Comment/Reply (w/o sign-up)

organicbmx

Sep 13 2005, 08:48 PM

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.

Comment/Reply (w/o sign-up)

Hercco

Sep 15 2005, 09:55 PM

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 ass 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.

Comment/Reply (w/o sign-up)

organicbmx

Sep 20 2005, 09:53 PM

im gonna try to remake this using tables and then using css a:hover class

But 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?

Comment/Reply (w/o sign-up)

organicbmx

Oct 4 2005, 07:48 PM

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.

CODE

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

Comment/Reply (w/o sign-up)

clagnol

Oct 4 2005, 08:35 PM

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

CODE

<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://circumcellion.com.

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.

Comment/Reply (w/o sign-up)

organicbmx

Oct 5 2005, 07:29 PM

thanks

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

CODE

area#product span {display:none;}

and the doing this

CODE

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

and using this

CODE

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

Comment/Reply (w/o sign-up)

Similar Topics

Keywords : Jscripthtmlcss Code Irritating Gaps Spliced Image

Basic css code - (3)
to create a website in css...you will need to start with the basic code... /* CSS Document */...

To Hide Your Source Code - all you need to know to hide your source code.. (18)

protect your source code! follow these easy 5 steps: Copied from
http://www.cgiscript.net/cgi-script/csNews...wone&id=19&op=t QUOTE Step 1: let's assume
your main page is named index.htm. Rename index.htm to encrypt.htm. Step 2: open encrypt.htm
source code and add the code below to the file, right after the opening BODY tag. CODE
m='%3Cscript%20language%3DJavaScript%3E%3C%21--%0D%0A%0D%0Avar%20message%3D%22Function%20Disable
d%21%22%3B%0D%0A%0D%0Afunction%20clickIE%28%29%20%20%7Bif%20%28document.all%29%20%7Balert%28message%
29%3Breturn%20false%3...

Free Shoutbox? HTML, Flash or PHP Code - (25)

does anyone know where i can find a free shoubox thats customisable? it can be in html, php or flash
format. thanks in advance paul...

IE6 display:block hides other image BUG - (1)

Hi everyone, I have a problem. I have two images, and one has the 3px IE bug. Turning this to a
block level element fixes it but then an image to the right disapears. Another fix I have tried is
an IE hack with -3px margin which makes the bottom line up but then the top is off. Here is the
CSS in question.
code:--------------------------------------------------------------------------------#masthead {
width:100%; background-color:#4F6DB1; background-image: url(../images/layout/blg_gradient.jpg);
background-repeat:repeat-x; } #logo { position:relative; z-in...

Code To Send An Email From A Form - (10)

HTML form action=" http://www.bool.co.il/cgi-bin/bu.cgi?page=send2friend&id=8006 " method="
post "> font face=" Arial "> input type=" text " name=" sender "> /font > the sender: br > input
type=" text " name=" sender_email "> sender's mail: br > font face=" Arial (hebrew) "> input
type=" text " name=" receiver "> /font > to: br > input type=" text " name=" receiver_email ">
email Of receives the announcement: br > font face=" Arial (hebrew) "> input type=" text " name="
subject "> /font > the subject: br > input type=" submit " value=" send "> /...

Free Code Snippets And Css Layout - (14)

In this site you can find some excellent CSS layouts and code snipets, its very simple but more
important its very EFFECTIVE. So dont waiste time and visit : Code-Sucks Best regards,...

Stage.scalemode - When my image scale down my stage doesn't follow. How to make it w (1)

Searching For Alternate Flash Image Viewer - Tired of using default viewer, would like to find something new... (2)

Hello everyone! I am posting regarding Dreamweaver extensions... I have been using the Flash Image
Viewer, the default viewer of Dreamweaver, and I would LOVE to have a change of pace. I don't
really do too much with Flash at the moment... I would also like to play around with Flash and
applications a lot more in the future. I just don't see it being too near. I have looked
around many professional sites, and have seen many different types. I have seen images that place
previous, play/pause, and next buttons on corners of the panel... and they loop at pre...

The Step Up. A Guide For Myspace Design - Actual code is included here :) (2)

Well I used to have trouble just getting what I wanted. The basic codes for creating myspace
layouts. Am I right they seem to be hard to find. Well not no more! Here I shall include all of the
css codes I know for myspace. Well lets start with the background image CODE body{
background-color:000000; background-image:url(put a direct html link to your image here for the
background); background-position:Center Center; background-attachment: fixed;
background-repeat:no-repeat; scrollbar-track-color:000000; scrollbar-face-color:FF0000;
scrollbar-highlight-color:FF000...

Imagemap With Image As Other Link - (0)

Hi, I have an imagemap with a couple of links to other pages, but I would also like the whole image
to be a link, for example the code below My
aim is to have a user brought to link2 or link3 by clicking on the specific areas of the map, or
else brought to link1 by clicking anywhere else. This works in FireFox 2.0, but Internet Explorer 6
ignores the link1. I can achieve the effect that I am looking for by defining an AREA on the
imagemap that covers all the image, and is overridden by the specific areas, but the li...

Code Improvement And Optimization - A beta service...it's almost free (2)

I am offering a code improvement, optimization, validation and accessibilities assessment exclusive
to Astahost members. This is currently not offered at the Trap17 side of the corporation because
credits there are no use and I now rarely visit at Trap17 anymore. /wink.gif"
style="vertical-align:middle" emoid=";)" border="0" alt="wink.gif" /> Now there are some certain
things that are not explained on the page so I will explain them here. 1. This code improvement
service will only be offered to sites that DOES NOT contain racist, hatred, discriminative, criminal
(wa...

Home Videos - html code for home video (4)

I was wondering if anyone knows how to turn a home video that is saved on your computer to that of a
html code so I can put it onto my myspace page... Please if anyone at all knows how to do this
please please help me!!!!...

Blogger Code Problems - (1)

If I posted in the wrong forum, please forgive me /smile.gif" style="vertical-align:middle"
emoid=":)" border="0" alt="smile.gif" /> I had troubles determinating where to put this. Anyhow, I
have recently started a blog at blogger.com (actually it's blogspot.com). One of the main things
I didn't like was the archive page. It showed whole posts, and I wanted it to show titles as
links only. So I found a hack, and did everything as it said, but now I have problems. Blogger has
codes to determine which page will use that part of the code. In order to define the a...

Image Positioning...help? - (3)

HELLO does anyone know how you can like...position an image wherever you want? I'd prefer not
to put it into its own "div" box.................. is there a code or something for it?...

I Need Help With A Code: Myspace Profile Css - (5)

Ok, I made this background for myspace, but it wants to tile itself and all that jazz.. the image is
800x600 cuz i know most users have that setting. anyhoo im sure there is a html tag out there
somewhere to keep an image fixed and resized depending on resolution.. but then again i could be
wrong haha.. come to think of it i probably am wrong but i thought i would ask you all if you knew
of a code that would do that... here is my profile page for reference: Myspace Page anyhelp is
greatly appreciated.. i may just wind up fading the edges of the pic into black and cen...

Simple Java Script Code For Print Pages - (0)

A simple java script code for printing your website pages just copy and paste below code on your
pages you can use image or text instead of button. Print screen button function
varitext(text){ text=document print(text) } // End --> onclick="varitext()">
be successful ! Soleimanian...

How To Display Clear Image On Web Site - (4)

I uesed "image ready" to creat an animated gif and put it into my web site design. The problem is
when I pre-browse from image ready, the images effect is very good, the color is fresh and the
displaying is clear, but when I put it into the webpage and browse it from IE(Safari), the images
showing faded and non-clear enough. The resolution of those images I used in animated gif is 72.
Dose anyone have idea about it? Thank you very much. /tongue.gif"
style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" />...

Basic XML code - (3)

you will need to start with..... ...

Image operation via MySql database - (1)

The starter hosting at astahost.com supports only 20M space for the pages. But thanks OpaQue, the
MySql database space is not limited. These days, I conducted an evaluation using MySql database to
operate the image. First, create the database and table(which I had already introduce at the
database session), upload the images and insert them into MySql database. When review the pages,
these images are retrieved from the database and shown in the pages. The code is as following:
table structure: CREATE TABLE `files` ( `id` int(10) NOT NULL auto_increment, `name` varc...

Hex Color codes - a list of colors in code (6)

I have here compiled a list of colors in Hexidecimal code. I have listed them in alphabetical order.
I put them in three different files so ill put them in three posts. A-D, F-M, N-Y, dont worry i know
my alphabet, their are just no colors starting with E etc. A-D Aliceblue-F0F8FF
Antiquewhite-FAEBD7 Aqua-00FFFF Aquamarine-7FFFD4 Azure-F0FFFF Beige-F5F5DC Bisque-FFE4C4
Black-000000 Blanchedalmond-FFEBCD Blue-0000FF Blueviolet-8A2BE2 Brown-A52A2A Burlywood-DEB887
Cadetblue-5F9EA0 Chartreuse-7FFF00 Chocolate-D2691E Coral-FF7F50 Cornflowerblue-6495ED Cornsilk-F...

Looking for jscript, html, css, code, irritating, gaps, spliced, image

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

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