...

View Full Version : Image slice not showing correctly in Firefox



austin36
06-09-2010, 07:10 PM
www.wildislandresorts.com ... signpost navigation slice shows fine in IE but not in Firefox. Can't figure out why.

rakasv
06-09-2010, 07:16 PM
what do you mean? i see exactly the same in IE and ff

Scriptet
06-09-2010, 07:24 PM
Why not use proper CSS as it was intended to create the rollover menu? Tables, many images, image spacers and JS rollovers is probably a technique that would have been used a decade ago but now it's more common to seperate presentation and content using CSS...

e.g your HTML for the menu should look more like this:



<ul id="menu">
<li class="home"><a href="index_abaco_rentals.html">Home</a></li>
<li class="location"><a href="abaco_bahamas_rental_locations.html">Locations</a></li>
<li class="area"><a href="abaco_bahamas_area.html">Area Info</a></li>
<li class="romantic"><a href="romantic_bahamas_wedding_honeymoon_occasions.html">Romantic Get-a-Ways</a></li>
</ul>


Which is a lot cleaner, more accessible and more meaningful to search engines. Then you'd just use CSS to style the menu as you want, and you could save the whole menu as one image slice and just use CSS background positioning.

austin36
06-09-2010, 07:28 PM
In FF the post is not staight , it's disjointed at each sign, and the yellow grass at the base of the post ... a peice of this is showing outside of the graphic- in the sand background. Do you not see this in your FF?

austin36
06-09-2010, 07:31 PM
Scriptet, this is the way Dreamweaver did it for me. Can I fix what I have, or do I need to learn another way?

rakasv
06-09-2010, 07:42 PM
i see it now... maybe insted of using a table you can use a single image inside a div... the image should be your post signs?? (sorry for my english) and maybe using a map image you could locate your links on that image...

here's an example (http://www.w3schools.com/TAGS/tag_map.asp)

tables are the worst you can use for layout, always keep that in mind =)

rakasv
06-09-2010, 07:45 PM
and the link highlight you can use css, the property a:hover should work

or keep the code you have

Scriptet
06-09-2010, 07:46 PM
Well I don't know enough about tables and how it works cross-browser i'm sure there'd be a hacky way to amend it.

Otherwise if you can provide a link to a single image of the menu I can show you another method of doing it.

austin36
06-09-2010, 08:43 PM
http://www.wildislandresorts.com/Images/post_sign_2.gif thank you... would like to learn a better way.

rakasv
06-09-2010, 08:49 PM
programs like photoshop can be useful when it's about locating the exact coordinate...

austin36
06-09-2010, 08:55 PM
rakasv,

you mean for the maps? So to find the coordinates I would do this in PhotoShop... starting to make since now.

rakasv
06-09-2010, 09:03 PM
let me go and eat something and i'll help you out with the map
=)

Scriptet
06-09-2010, 09:21 PM
This is not a map-based way as rakasav will be posting, i've not really messed around with maps too often!

The HTML for the menu would be:



<ul id="menu">
<li class="home"><a href="index_abaco_rentals.html">Home</a></li>
<li class="location"><a href="abaco_bahamas_rental_locations.html">Locations</a></li>
<li class="area"><a href="abaco_bahamas_area.html">Area Info</a></li>
<li class="romantic"><a href="romantic_bahamas_wedding_honeymoon_occasions.html">Romantic Get-a-Ways</a></li>
</ul>


and the CSS for this menu would be:



#menu{
overflow:auto;
list-style:none;
width:200px;
height:300px;
margin:0; padding:0;
background:url('http://www.wildislandresorts.com/Images/post_sign_2.gif');
}
#menu li{
margin:0; padding:0;
}
#menu li a{
display:block;
text-indent:-999em;
background:url('http://www.wildislandresorts.com/Images/post_sign_2.gif');
}
#menu li.home a{
background-position:0 -17px;
margin-top:17px;
height:37px;
}
#menu li.home a:hover{background-position:right -17px;}
#menu li.location a{
background-position:0 -57px;
margin-top:3px;
height:34px;
}
#menu li.location a:hover{background-position:right -57px;}
#menu li.area a{
background-position:0 -96px;
margin-top:5px;
height:36px;
}
#menu li.area a:hover{background-position:right -96px;}
#menu li.romantic a{
background-position:0 -143px;
margin-top:11px;
height:40px;
}
#menu li.romantic a:hover{background-position:right -143px;}


Note: You need to change the background image picture so that the "hover" version of it appears directly next to it, so it's still one picture but showing two menus next to each other one the hover version and the other normal...

If you would like the technique explaining further let me know!

rakasv
06-09-2010, 10:06 PM
here it is


<img src="post_sign_2.gif" width="200" height="300" alt="postsign" usemap="#postsign" border="0"/>

<map name="postsign">
<area shape="poly" coords="13,19,194,31,194,53,10,39" href="#" alt="home" onmouseover="MM_swapImage('About_roll','','Images/sign/images/About_us_btn_over.gif',1)" onmouseout="MM_swapImgRestore()"
href="index_abaco_rentals.html"/>
<area shape="poly" coords="6,67,162,60,159,87,11,88" href="#" alt="locations" />
<area shape="poly" coords="32,104,180,95,180,125,32,133" href="#" alt="areainfo" />
<area shape="poly" coords="43,143,175,145,171,179,36,178" href="#" alt="romantic" />
</map>


just add the other mouse events to the rest of the tags

let me know if it worked=)

austin36
06-10-2010, 04:07 PM
rakasv,

What I have below is not working... trying to get the "home" to work before adding mouse events to others. While in Dreamweaver "live mode" home does not switch out with the: Images/sign/images/About_us_btn_over.gif . " <area shape="poly" coords="13,19,194,31,194,53,10,39" href="#" alt="home" onmouseover="MM_swapImage('About_roll','','Images/sign/images/About_us_btn_over.gif',1)" onmouseout="MM_swapImgRestore()"
href="index_abaco_rentals.html"/> " is grayed out as if Dreamweaver thinks something is wrong.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

</head>

<body>
<img src="Images/post_sign_2.gif" width="200" height="300" alt="postsign" usemap="#postsign" border="0"/>

<map name="postsign">
<area shape="poly" coords="13,19,194,31,194,53,10,39" href="#" alt="home" onmouseover="MM_swapImage('About_roll','','Images/sign/images/About_us_btn_over.gif',1)" onmouseout="MM_swapImgRestore()"
href="index_abaco_rentals.html"/>
<area shape="poly" coords="6,67,162,60,159,87,11,88" href="#" alt="locations" />
<area shape="poly" coords="32,104,180,95,180,125,32,133" href="#" alt="areainfo" />
<area shape="poly" coords="43,143,175,145,171,179,36,178" href="#" alt="romantic" />
</map>
</body>
</html>

austin36
06-10-2010, 04:10 PM
Scriptet,

I haven't tried your way yet, but will today. Thank you both ( Scriptet / Rakasv)for your help.

rakasv
06-10-2010, 04:41 PM
well, according to w3schools, mouse events are allowed for map tags. Let me do some research. There´s always a way to make things happen =)

rakasv
06-10-2010, 04:51 PM
you have the href attribute twice... try deleting one and lets see what happens

rakasv
06-10-2010, 05:16 PM
if that doesn´t work i just thought about another solution:

you could use this script (http://www.dynamicdrive.com/dynamicindex4/image5.htm)

and cut your image in four hirizontal blocks and locate those images in divs. The link i sent you has lots of useful info and js scripts for images

austin36
06-10-2010, 07:53 PM
Scriptet,

Just tried the CSS and I like the simplicity of your way. I'm not getting any sort of highlighting when I hover over each sign "Home", "locations" , "area", "Romantic Getaways". All I need is some highlighting so that the user knows it's a link. Is there a way to do this with CSS.

Scriptet
06-10-2010, 08:05 PM
Yeah the hovers are already set-up on it you just need to change the image as I stated in the post to include the hover menu next to it.

austin36
06-10-2010, 10:25 PM
Sciptet,

I don't really understand. Say I wanted the Images/sign/images/About_us_btn_over.gif to be the hover state of the "home" sign board? When someone moused over "Home" would the About_us_btn_over.gif be seen in the exact place of "home" or would it drop to the side?

Scriptet
06-10-2010, 11:09 PM
Sorry basically the code is already set-up you just need to copy and paste as is.

Then what you need to do is see this picture here:
http://www.wildislandresorts.com/Images/post_sign_2.gif

You need to modify the picture with your image editing program so that next to the menu is the same menu again but the hover version of it...

So you need to join up About_us_btn_over.gif and the other hovers into one menu like you did before and put it next to the other picture...

Scriptet
06-11-2010, 01:14 AM
Just to be clear because i'm pretty poor at explaining, you want the picture to look like this:

http://img822.imageshack.us/img822/1420/postsign.gif

but the menu on the right should be the hover version of the menu!!

austin36
06-12-2010, 03:41 PM
Scriptet,

Yes, I'm researching this and starting to understand. Basically the hover is showing the background image, which the the same as the foreground image, except for a highlighted state. the complication for this menu is that I only want one sign ( Home, Locations, Area, Romantic getaways) highlighted at a time. So for this i need 5 separate images. One for normal state, one for hovering over each sign ( home, locations, area,...). I'm I understanding this correctly.

Sorry to be asking for so much detail.. I'm the owner/operator of a small resort, so caretaker, accountant, internet guy... master of none!

Scriptet
06-12-2010, 11:58 PM
You don't need 5 seperate images with my example, just the 1 image which is like in the link i've shown you...(which has the benefit of instant rollovers without delay/and only 1 HTTP request = sever benefits and faster loading) If you just link/send me the 5 seperate hover images i'll join them together and show you what I mean cause clearly I suck badly at explaining!!

austin36
06-14-2010, 04:13 PM
Scriptet,

www.wildislandresorts.com/Images/sign/images/About_us_btn_over.gif
www.wildislandresorts.com/Images/sign/images/Area_btn_over.gif
www.wildislandresorts.com/Images/sign/images/Location_btn_over.gif
www.wildislandresorts.com/Images/sign/images/getaway_btn_over.gif


Here are the links to the highlighted state of each sign. Thank you! I hope to understand once I see it and be able to use this method in the furture.

austin36
06-14-2010, 05:55 PM
Scriptet,

If you have PayPal I'd be happy to compensate you for your time. Either way I very much appreciate the help.

Scriptet
06-14-2010, 11:39 PM
Hi again Austin, basically the HTML and CSS is the same and looks like this:

HTML:



<ul id="menu">
<li class="home"><a href="index_abaco_rentals.html">Home</a></li>
<li class="location"><a href="abaco_bahamas_rental_locations.html">Locations</a></li>
<li class="area"><a href="abaco_bahamas_area.html">Area Info</a></li>
<li class="romantic"><a href="romantic_bahamas_wedding_honeymoon_occasions.html">Romantic Get-a-Ways</a></li>
</ul>


CSS:



#menu{
overflow:auto;
list-style:none;
width:200px;
height:300px;
margin:0; padding:0;
background:#000 url('http://img813.imageshack.us/img813/2692/posthover.gif');
}
#menu li{
margin:0; padding:0;
}
#menu li a{
display:block;
text-indent:-999em;
background:#000 url('http://img813.imageshack.us/img813/2692/posthover.gif');
}
#menu li.home a{
background-position:0 -17px;
margin-top:17px;
height:37px;
}
#menu li.home a:hover{background-position:right -17px;}
#menu li.location a{
background-position:0 -57px;
margin-top:3px;
height:34px;
}
#menu li.location a:hover{background-position:right -57px;}
#menu li.area a{
background-position:0 -96px;
margin-top:5px;
height:36px;
}
#menu li.area a:hover{background-position:right -96px;}
#menu li.romantic a{
background-position:0 -143px;
margin-top:11px;
height:40px;
}
#menu li.romantic a:hover{background-position:right -143px;}


As you can now see it uses this image (http://img813.imageshack.us/img813/2692/posthover.gif) and this image only to create the whole menu via the use of some clever background positioning.

To explain the concept the HTML is written using an un-ordered list (http://www.w3schools.com/tags/tag_ul.asp), seeing as this is what the navigation is after all, a list. This is the most common HTML used to create navigation menus and is very clean and semantic as you can see. Search Engines can clearly see the links for the different sections and what they are titled.

Then the CSS controls the presentation of this list. For example try just the HTML to see how it looks without any presentation. For each of the links we position the background behind it at the exact point, and then on hover adjust the background position so it moves to the right of the image, which is the hover state.

It's quite an advanced technique to understand at first but pretty simple when you understand the concept.

It uses a combination of simple CSS rollovers (the basic rollover), CSS sprites (this technique means using only 1 background image rather than slices) and image replacement techniques (to hide the text in the menu so the background image shows through). See here (http://www.alistapart.com/articles/sprites) to read more about the technique used.

Lastly the menu was tested in IE6,7,8 Opera, Safari 4, FF 3.6.5. It also degrades nicely for users with CSS disabled, uses no JS and results in instant rollovers with minimal code!

Note: You probably want to change the image so it's hosted on your server since I uploaded it to imageshack, you just need to change the 2 url's in the code if you do this. You also might have a better quality version of the image seeing as you now know how it is meant to look because I had to edit it a bit in Photoshop.

austin36
06-15-2010, 06:06 PM
Scriptet,

Thank you. I've got it now and it's a great way to do these types of images.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum