PDA

View Full Version : Help Me! My webpage rollover images goes away


bugis083
10-02-2010, 03:05 AM
Hi all. I'm realy stuck there with my rollover images. I got created my website using dreamweaver CS5 and when I opened it in firefox by myself all was ok, but when my friend opened page all rollover images jump to left side of webpage. So it mean that only i can see all normaly, but all other not.
Please help me. I can't continue my work now.:(

There is my immages:

http://img193.imageshack.us/i/friendt.png/

Note: My monitor wide resolution is 1440, My friend wide monitor resolution is 1920.

edbr
10-02-2010, 03:15 AM
you need to post your code, its difficult to be sure from images. welcome to the forum BTW

edbr
10-02-2010, 03:15 AM
or URL of course

bugis083
10-02-2010, 03:25 AM
My code is:

<!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>
<style type="text/css">
.GuidesPage {
background-attachment: scroll;
background-color: #000;
background-image: url(../pictures/Characters%20Guides%20Page.PNG);
background-repeat: no-repeat;
background-position: center top;
text-align: center;
color: #60452C;
}
#apDiv1 {
position:absolute;
left:310px;
top:30px;
width:37px;
height:13px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:389px;
top:30px;
width:36px;
height:12px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:486px;
top:28px;
width:34px;
height:11px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:564px;
top:30px;
width:33px;
height:12px;
z-index:4;
}
#apDiv5 {
position:absolute;
left:702px;
top:30px;
width:37px;
height:12px;
z-index:5;
}
#apDiv6 {
position:absolute;
left:791px;
top:29px;
width:35px;
height:12px;
z-index:6;
}
#apDiv7 {
position:absolute;
left:882px;
top:30px;
width:32px;
height:12px;
z-index:7;
}
#apDiv8 {
position:absolute;
left:343px;
top:347px;
width:60px;
height:55px;
z-index:8;
}
#apDiv9 {
position:absolute;
left:1244px;
top:133px;
width:45px;
height:45px;
z-index:8;
}
#apDiv10 {
position:absolute;
left:1063px;
top:260px;
width:60px;
height:74px;
z-index:9;
}
#apDiv11 {
position:absolute;
left:199px;
top:261px;
width:87px;
height:66px;
z-index:10;
}
#apDiv12 {
position:absolute;
left:15px;
top:139px;
width:52px;
height:47px;
z-index:11;
}
#apDiv13 {
position:absolute;
left:645px;
top:437px;
width:53px;
height:45px;
z-index:12;
}
#apDiv14 {
position:absolute;
left:874px;
top:434px;
width:47px;
height:62px;
z-index:13;
}
#apDiv15 {
position:absolute;
left:396px;
top:437px;
width:65px;
height:53px;
z-index:14;
}
#apDiv16 {
position:absolute;
left:1115px;
top:979px;
width:75px;
height:17px;
z-index:8;
}
#apDiv17 {
position:absolute;
left:1115px;
top:1009px;
width:73px;
height:22px;
z-index:9;
}
#apDiv18 {
position:absolute;
left:1115px;
top:1039px;
width:65px;
height:18px;
z-index:10;
}
#apDiv19 {
position:absolute;
left:1115px;
top:949px;
width:76px;
height:17px;
z-index:11;
}
#apDiv20 {
position:absolute;
left:1115px;
top:1068px;
width:92px;
height:18px;
z-index:12;
}
#apDiv21 {
position:absolute;
left:1115px;
top:1098px;
width:108px;
height:20px;
z-index:13;
}
#apDiv22 {
position:absolute;
left:1115px;
top:1128px;
width:113px;
height:24px;
z-index:14;
}
</style>
<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 class="GuidesPage" onload="MM_preloadImages('../pictures/buttons/Home red 2.PNG','../pictures/buttons/Guides Button2.PNG','../pictures/buttons/Files Red 2.PNG','../pictures/buttons/Runewords red 2.PNG','../pictures/buttons/Recipes Red 2.PNG','../pictures/buttons/Events red 2.PNG','../pictures/buttons/Shop Button2.PNG','../pictures/buttons/Amazon2.PNG','../pictures/buttons/assasin2.PNG','../pictures/buttons/Necromancer2.PNG','../pictures/buttons/Paladin2.PNG','../pictures/buttons/Sorceress2.PNG','../pictures/buttons/Barbarian2.PNG','../pictures/buttons/Druid2.PNG')">
<div id="apDiv1"><a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../pictures/buttons/Home red 2.PNG',1)"><img src="../pictures/buttons/home Red.PNG" name="Image8" width="55" height="18" border="0" id="Image8" /></a></div>
<div id="apDiv2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../pictures/buttons/Guides Button2.PNG',1)"><img src="../pictures/buttons/Guides Button.PNG" name="Image9" width="70" height="18" border="0" id="Image9" /></a></div>
<div id="apDiv3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','../pictures/buttons/Files Red 2.PNG',1)"><img src="../pictures/buttons/Files Red.PNG" name="Image10" width="48" height="21" border="0" id="Image10" /></a></div>
<div id="apDiv4"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','../pictures/buttons/Runewords red 2.PNG',1)"><img src="../pictures/buttons/Runewords red.PNG" name="Image11" width="115" height="18" border="0" id="Image11" /></a></div>
<div id="apDiv5"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','../pictures/buttons/Recipes Red 2.PNG',1)"><img src="../pictures/buttons/Recipes Red.PNG" name="Image12" width="70" height="18" border="0" id="Image12" /></a></div>
<div id="apDiv6"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','../pictures/buttons/Events red 2.PNG',1)"><img src="../pictures/buttons/Events red.PNG" name="Image13" width="70" height="18" border="0" id="Image13" /></a></div>
<div id="apDiv7"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','../pictures/buttons/Shop Button2.PNG',1)"><img src="../pictures/buttons/Shop Button.PNG" name="Image14" width="55" height="18" border="0" id="Image14" /></a></div>
<div id="apDiv16"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','../pictures/buttons/assasin2.PNG',1)"><img src="../pictures/buttons/assasin.PNG" name="Image16" width="252" height="29" border="0" id="Image16" /></a></div>
<div id="apDiv17"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','../pictures/buttons/Necromancer2.PNG',1)"><img src="../pictures/buttons/Necromancer.PNG" name="Image17" width="252" height="29" border="0" id="Image17" /></a></div>
<div id="apDiv18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','../pictures/buttons/Barbarian2.PNG',1)"><img src="../pictures/buttons/Barbarian.PNG" name="Image18" width="252" height="28" border="0" id="Image18" /></a></div>
<div id="apDiv19"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','../pictures/buttons/Amazon2.PNG',1)"><img src="../pictures/buttons/Amazon.PNG" name="Image15" width="252" height="29" border="0" id="Image15" /></a></div>
<div id="apDiv20"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','../pictures/buttons/Paladin2.PNG',1)"><img src="../pictures/buttons/Paladin.PNG" name="Image19" width="252" height="29" border="0" id="Image19" /></a></div>
<div id="apDiv21"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','../pictures/buttons/Sorceress2.PNG',1)"><img src="../pictures/buttons/Sorceress.PNG" name="Image20" width="252" height="29" border="0" id="Image20" /></a></div>
<div id="apDiv22"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','../pictures/buttons/Druid2.PNG',1)"><img src="../pictures/buttons/Druid.PNG" name="Image21" width="252" height="28" border="0" id="Image21" /></a></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span id="main"><span id="search"><strong></strong></span></span><strong>2010 Diablo II MedianLT Serveris</strong></p>
</body>
</html>


only "app div" let me move that pictures exactly where I want, and
this is very easily to do, and it do not waste my time.



Please give me another way to solve this problem.

DWcourse
10-02-2010, 03:42 AM
The AP divs are bad design practice and you should get rid of them.

Are you sure you uploaded the rollover image files to your server?

And btw, I don't know if it's related to your issue but iit's bad practice to use spaces in file names use - or _ instead.

edbr
10-02-2010, 03:55 AM
only "app div" let me move that pictures exactly where I want, and
this is very easily to do, and it do not waste my time.
im afraid they have wasted your time using absolute positioning on a unknown such as various screen resolutions is a disaster very often

bugis083
10-02-2010, 08:47 AM
So to prevent this rollover images jumping in the right on high resolution pc's
what i should to do? For example i can tell my steeps to create a page, First I insert a background, then i need to fill that background by rollover images, and I'm using rollover "APP DIV" Because i though that this is fastest and easiest way ever, until i got problems with their jumping.
There is my test website page, you can watch and of course will saw how many rollover images i'm using to create my pages. They are very important for my website pages.

http://Bugistest.wu.lt

So what type of tool's i should use ? I realy stuck here.

bugis083
10-02-2010, 08:51 AM
In which name's i'm using spaces? Pls Because I'm new in dreamweaver. And of course many basic tips what all to should know, I don't know them.

bugis083
10-02-2010, 09:06 AM
There is some example of my web pages codes:

http://www.2shared.com/file/CD0yPIwQ/Pages_Codes.html

gentleone
10-02-2010, 03:23 PM
Okay in a nutshell. You need to lay out your pages according to the normal flow and if you want to take a div or another element out of it you use floats. You position these elements with margin and padding. For navigation you use an unordered list and the list items you float left so that the line-up horizontally.

http://webdesign.about.com/od/cssglossary/g/bldefnormalflow.htm

http://css.maxdesign.com.au/floatutorial/introduction.htm

http://css.maxdesign.com.au/listamatic/index.htm

DWcourse
10-02-2010, 03:24 PM
The problem is the AP divs which are positioned based upon your screen size and are off when anyone's browser window doesn't match your screen size. Notice that they seem move around when you resize the browser window while viewing the page.

You could get around the problem by wrapping the entire site in a relatively positioned "wrapper" div and repositioning the page elements to the wrapper but it would still be a poor solution.

Also your background image is huge and takes forever to load. People aren't going to want to wait for that. It's great artwork but it's not really functional.

bugis083
10-03-2010, 08:22 PM
So if i understand correctly i need just use wrapper function?
Look i have created my own web page background with photoshop, there is oll main/basic things in them, like: text is printed, panels is printed on it, nav bar is printed on it, Oll is printed. Now i just need to put some rollover images to correct place where is my background buttons panel printed. I dont need to write any words, or make some nav bars, or headers, because all this i have already painted in my own background. I hard worked to paint/create my background with Photoshop, in which is included all that things what must have normal web site. Will you understand what i need to say? I choose "app div" because this is wery simply way to move my buttons in a right background place. After i saw that in higher resolution desktops that buttons goes left. I don't know what i need to use now, maybe "Div Tags" in Css styles, or what else, but please tell me which command i need to use, to put my buttons, or immages in a right place by avoiding that problem. Thanks waiting for your guys help.

bugis083
10-03-2010, 08:35 PM
Ok listen, steeps what i'm going to do by your post:
1)create new site
2) Then go to pages properties, add my background picture, set no scrolling.
3) then select my main scc style and create new Css rule named for example *
4) then i go select that rule and insert div_tag named wrapping, and use this div tag to put my rollover images on it. Right? that is ? So easily?

gentleone
10-03-2010, 08:38 PM
You need to strip down that background image in size. It's 3.1 Mb which takes forever to show up and I have a broadband connection.... can you imagine those with a dial-up.

Slice that image manually, thus no save and slice for the web in Photoshop, and save them as individual images and use div tags and the CSS background property to place them in your page. And get rid of the text in the image, use HTML paragraphs for this.

But really with a complex layout/design like this you definately need to understand the basics of HTML and CSS. Did you check out those links I posted before? Those are good to start with and to understand what a div will do once it's placed in your HTML.

bugis083
10-03-2010, 09:02 PM
So now I understood that "App Div" which i was using for my rollover images is like a float which has no layer, That's way they lined on the left. I need to use wrapping or div tags. Get rid of text in the image? So you say it is better to put text in a dreamweaver not in the background image? I was printed text in a background image because photoshop can let me use many great fonts and text styles, thats way i was printed almost all my text on the pictures.

gentleone
10-03-2010, 09:32 PM
For your navigation you use an unordered list

<ul id="nav">
<li><a href="#">page1</a></li>
<li><a href="#">page2</a></li>
<li><a href="#">page3</a></li>
<li>etc.</li>
</ul>

And you use CSS to lineup the list horizontally...

#nav li {list-style-type: none; float: left}

...and to set the menu images as backgrounds in your CSS.

Here is an article that explains everything what I want to make clear to you:
http://inobscuro.com/tutorials/image-rollover-menu-19/

Re your text... of course you can do it like that, but then your content will be invisible for search engines & screen readers. It's best practice to use websafe fonts and if you want to use an obscure font then use a font-family so that you have a fall-back to websafe fonts for vistors that don't have that obscure font installed on their computer.

Corrosive
10-04-2010, 06:18 AM
I'm enjoying this thread immensely. :)

gentleone
10-04-2010, 06:58 PM
I'm enjoying this thread immensely. :)

Can I enjoy it too??? ;)

bugis083
10-10-2010, 03:36 PM
Hey all again, thanks you for your quick and 100% working answers.
Now i'm working with Css an app div. All is going fine.
But today i have got one break, I don't know what to do!
Here is a problem: I had created my navigation bar wrapper to contain there my rollover buttons: #wrapper 667px. with Auto Left and Auto Right marigins, then i put div tag in it And then i input in it 7 small pictures and now need that they will be centered with spaces by each of other.
Need to look in to the picture to understand this:

Here is link for this picture:

http://yfrog.com/6292357033j

gentleone
10-10-2010, 03:55 PM
we need an url or post your code to see what you've done so far.

bugis083
10-10-2010, 05:21 PM
Source Code:

<!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>Index</title>
<link href="css/Style.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#000000" background="pictures/Home Main.JPG">
<div id="wrapper">
<div id="NavBar"><img src="pictures/buttons/home Red.PNG" width="55" height="18" /><img src="pictures/buttons/Guides Button.PNG" width="70" height="18" /><img src="pictures/buttons/Files Red.PNG" width="48" height="21" /><img src="pictures/buttons/Runewords red.PNG" width="115" height="18" /><img src="pictures/buttons/Recipes Red.PNG" width="70" height="18" /><img src="pictures/buttons/Events red.PNG" width="70" height="18" /><img src="pictures/buttons/Shop Button.PNG" width="55" height="18" /></div>
</div>
</body>
</html>
Style Css:

@charset "utf-8";
* {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: center top;
margin: 0px;
}
#wrapper {
width: 665px;
margin-right: auto;
margin-left: auto;
margin-top: 548px;
padding-right: 140px;
text-align: center;
}

gentleone
10-10-2010, 05:53 PM
use for navigation an unordered list. You'll be more flexible to position the menu items with padding and/or margins and it's the semantic way to code a menu. Take the listamatic menus as reference and go from there.

bugis083
10-19-2010, 11:36 PM
Hi all.
I want to say big thanks all who helped my by creating with Dreamweaver.
I'm almost learned how to work with it, and all is yours merits.
I can't say that i does not have aproblems, they appear. And always with div_tag jumping.
This time i have created some webpage and put on it, text, images and my text goes changing the posotion.
What i do wrong? can someone tell me?
Thanks


My Webpage. http://median.wu.lt/html/events.html


You can see, there down is text. And it is changind their position depend on Copmuter Screen Resolution.