|
HTML - Rollover Problem Not Yet Resolved
Hello I have an issue with a rollover on my page. I'm building a website for AS level media coursework and need help with a code. The rollover is part of a table and is aimed to play music when the mouse hovers over it, while at the same time switching the image to another...
The code for the rollover itself is: Code: <a href="#" onMouseOut="MM_swapImgRestore()""stopSound(0);" onMouseOver="MM_swapImage('Image9','','piece1.jpg',1)""playSound(0);"><img src="piece1hit.jpg" name="Image9" width="156" height="156" border="0"></a>
The bad javascript for the image swap is: Code: <script language="JavaScript" 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>
And finally the even worse coding for the sound is: Code: <SCRIPT LANGUAGE="JavaScript"><!--
var aySound = new Array();
aySound[0] = "Kylie.mp3";
aySound[1] = "fseven.mp3";
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;
function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//--></SCRIPT>
I hope someone can resolve my issue for me, for I'm absolutely stumpted by this. I have very limited expertise in coding (as you can see) and would greatly appreciate any help I can recieve. Thank you for your time. Similar TutorialsHi, I'm trying to debug some code and, in spite of running it cleanly through the W3C validator, still have some big issues. The site runs fine in Chrome but displays incorrectly in IE and FireFox. You can see the site at www.iwailingwall.com Firefox is giving the following error: Error: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.statusText]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///C:/Program%20Files/Mozilla%20Firefox/components/nsBlocklistService.js :: anonymous :: line 548" data: no] Source File: file:///C:/Program%20Files/Mozilla%20Firefox/components/nsBlocklistService.js Line: 548 IE is not showing any errors. I would really appreciate any help on the display issue as well as a pointer to browser-specific code validators if they exist. Thanks in advance for any help you can provide. Please let me know if I can provide any additional information to assist in a diagnosis. The problematic code is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>The Wailing Wall</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- SWFObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/swfobject/ --> <script type="text/javascript" src="swfobject.js" /> <style type="text/css"> textarea#styled { width: 600px; height: 120px; border: 3px solid #cccccc; padding: 5px; font-family: Tahoma, sans-serif; background-color: rgb(255,255,204); background-position: bottom right; background-repeat: no-repeat; } body { padding: 20px; background-color: rgb(238, 238, 238); font-family: Calibri; font-size: larger; color: rgb(255, 255, 204); font-weight: bolder; text-align: center; } </style> </head> <body style="background-image: url(HortonRockWall2.jpg);text-align:center;"> <table align="center"> <tr> <td> </td> <td align="left" > <font size="8" />The Wailing Wall <br /> <font size="4" />Tuck your worries here, snug among all our worries. <br />We'll keep them safe so you can let them go. </td> <td> </td> </tr> <tr> <td> </td> <td><table><tr><td> <div id="flashcontent">This will be shown to users with no Flash or Javascript.</div> <script type="text/javascript"> var myWidth = 0, myHeight = 0; var maxHeight = 0; myWidth = 600; myHeight = 600; if (myWidth > myHeight) maxHeight = .75* myHeight; else maxHeight = .75* myWidth; var so = new SWFObject("tagcloud.swf", "tagcloud", maxHeight, maxHeight, "7", "#000000"); // uncomment next line to enable transparency so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0xFFFFCC"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "60"); so.addVariable("tagcloud", "%3Ctags%3E%3Ca+href%3D%27%2Findex.php%3Fid%3D98%27+style%3D%2710%27%3EAdd+to+the+wall+here....%3C%2 Fa%3E%3Ca+href%3D%27%2Findex.php%3Fid%3D97%27+style%3D%2710%27%3EAdd+to+the+wall+here....%3C%2Fa%3E% 3Ca+href%3D%27%2Findex.php%3Fid%3D96%27+style%3D%2710%27%3EI+hate+meetings+about+meetings...%3C%2Fa% 3E%3Ca+href%3D%27%2Findex.php%3Fid%3D94%27+style%3D%2710%27%3EI+am+worried+that+the+recessio...%3C%2 Fa%3E%3Ca+href%3D%27%2Findex.php%3Fid%3D84%27+style%3D%2710%27%3EI+think+that+this+is+a+really+...%3 C%2Fa%3E%3Ca+href%3D%27%2Findex.php%3Fid%3D75%27+style%3D%2710%27%3EI+often+worry+that+I+am+a+****.. .%3C%2Fa%3E%3Ca+href%3D%27%2Findex.php%3Fid%3D74%27+style%3D%2710%27%3EI+worry+that+I%27ve+spent+4+y ea...%3C%2Fa%3E%3Ca+href%3D%27%2Findex.php%3Fid%3D73%27+style%3D%2710%27%3EI+worry+that+my+son+is+in heren...%3C%2Fa%3E%3Ca+href%3D%27%2Findex.php%3Fid%3D72%27+style%3D%2710%27%3EOne+worry+I+have+is+th at+someo...%3C%2Fa%3E%3Ca+href%3D%27%2Findex.php%3Fid%3D71%27+style%3D%2710%27%3EI+am+worried+about+ the+possibi...%3C%2Fa%3E%3Ca+href%3D%27%2Findex.php%3Fid%3D70%27+style%3D%2710%27%3EWhen+this+electi on+is+over%2C+I+...%3C%2Fa%3E%3Ca+href%3D%27%2Findex.php%3Fid%3D69%27+style%3D%2710%27%3EI+am+worrie d+about+what+I+am+g...%3C%2Fa%3E%3Ca+href%3D%27%2Findex.php%3Fid%3D68%27+style%3D%2710%27%3EIt%27s+f all+again+and+the+weath...%3C%2Fa%3E%3Ca+href%3D%27%2Findex.php%3Fid%3D67%27+style%3D%2710%27%3EI%27 m+worried+about+what%27s+goi...%3C%2Fa%3E%3Ca+href%3D%27%2Findex.php%3Fid%3D66%27+style%3D%2710%27%3 EHopefully+this+isn%27t+meta-ana...%3C%2Fa%3E%26nbsp%3B%26nbsp%3B+%3Ca+href%3D%27%2Findex.php%3Fpage%3D2%27+style%3D%2710%27%3ENe xt%3C%2Fa%3E++%3Ca+href%3D%27%2Findex.php%3Fpage%3D2%27+style%3D%2710%27%3ELast+Page%3C%2Fa%3E+%3Ca+ href%3D%27%2Findex.php%27+style+%3D%2710%27%3EReturn+to+main+page.%3C%2Fa%3E%3C%2Ftags%3E");so.write ("flashcontent"); </script> </td></tr> <tr><td align="center"> <font size='2' />Based on WP-Cumulus by <a href="http://www.roytanck.com/">Roy Tanck</a></td></tr> </table></td> <td valign='top'> <table style="width: 407px; margin-left: 30px; border-width:3;"> <tr> <td style="width: 383px;"> <form action='/index.php' method='post' name='contact_form' /> <textarea name="body" rows="5" cols="40">Add to the wall here.</textarea> </td> </tr> <tr> <td style="width: 383px;"><font size="3" />By: <input name="name" value="Anonymous" type="text" /><input value="Submit" name="Submit" type="submit" /><input value="Reset" name="Reset" type="reset" /> </td> </tr> <tr> <td style="width: 383px;"> <input name='reference' type='hidden' value='0' />What do you need to let go of? </td> </tr> </table> </td> </tr> </table> </body> </html> I seem to be having a problem with my image rollover effect in the header of my website. I am using CSS to call in the image. When using IE, the rollover happens much too slow. This doesn't seem to be a problem in firefox or safari. Any suggestions? Site: www.gallantgifts.com CSS: www.gallantgifts.com/css/master.css Thanks!! Hey guys, I'm a designer trying to code my website which is problem number 1. I'm trying to crreate these solid rollover states for my graphic headers on my nav (about and contact). I found a site that I plugged code from using javascript which i dont' know. The "about" link works fine but the "contact" link effects teh about link instead of targeting itself. Any help you can offer I would really appreciate. Thanks! here's my site: http://www.bru.us.com here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>BRU</title> <link rel="stylesheet" type="text/css" href="bru.css" /> <script type="text/javascript"> var revert = new Array(); var inames = new Array('about','contact'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "nav/"+inames[i]+"2.gif"; } } function over(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function out(num) { if(document.images) document.images[inames[num]].src = revert[num]; } </script> </head> <body> <div id="header"> <img src="images/logo_gold.gif" /> </div> <div id="navigation"> <IMG SRC="images/nav_header_design.gif"/><br> <a href="about.html"class="catlink">TowerGroup</a><br> <a href="about.html"class="catlink">PSR</a><br> <a href="about.html"class="catlink">Click&Buy</a><br> <a href="about.html"class="catlink">MCA</a><br> <a href="about.html"class="catlink">Incretin Forum</a><br> <a href="about.html"class="catlink">Mastercard</a><br> <a href="about.html"class="catlink">Baraclude</a><br> <a href="about.html"class="catlink">IconNicholson</a><br> <a href="about.html"class="catlink">FIFA</a><br> <br> <br> <IMG SRC="images/nav_header_other.gif"/><br> <a href="india_photos.html"class="catlink">India</a><br> <br> <br> <a href="about.html"> <img src="nav/about1.gif" name="about" onMouseOver="over(0)" onMouseOut="out(0)"> </a><br><br> <a href="mca.html"> <img src="nav/contact1.gif" name="contact" onMouseOver="over(0)" onMouseOut="out(0)"></a><br> </div> <div id="portfolio"> <IMG SRC="images/towergroupmarketing/tw_moodboard.jpg"/>     </div> <div id="description"> <h1>TowerGroup / Moodboard</h1> <p> When TowerGroup came to us and talked about what they felt differentiated them from other financial institutions, one thing that stood out to me, was that they wanted to communicate that they're analysts are hands-on and accessible. To express this concept in a website, I thought mixing hand-drawn illustrations with photographs would help give the site a more personable feel. </p> </div> <!--Content--> <div style="position:absolute; top:474px; left:499px;"></div> </body> </html> The website I am working on is he http://radarcartoons.com/test/test.html I want each of those "blips" to change to the other pictures I have of them lit when you rollover it, but I can't figure out how to do a rollover script for multiple images on one page. The names of my alternate files are the same as the regular ones, except they have an _lit.jpg after them. So if it's 2.jpg, then the lit one would be 2_lit.jpg. I will also of course want to make them links to pages which i still have to make, but maybe the code just to make them links and an example link could show me how to get it working. Thanks a lot to anyone who can help me out on my big request! Hello Folks, I have created a graphic using photoshop CS2 that will form the basis of a webpage. I am a little stuck as to how to include rollover buttons. This is the graphic as it is at the moment: http://magicalwonders.com/colingreen/ With my first attempt at using a background graphic for a website I was able to use a repeating tile in the left hand side bar, and insert basic image buttons for navigation. This time though the situation is a little different, as I am not using a solid colour in the side bar, in favour of a graduated colour image. I have yet to slice the graphic, and will create a slice towards the bottom of the graphic that can be used to repeat - so that any overflow text doesn't break the design. What I'm not sure about is, if the main background image for the side bar, and the repeat background tile can occupy the same cell, both as background images? If they can, then adding rollover buttons should not be a problem. If they can, I'm not sure what the code would look like to handle that. If they can't, I'm wondering what other method can be used to include Rollover navigation buttons. I'd be grateful if someone can advise. Many thanks, Myles hey not too sure if I am overlooking something but i have my rollover buttons set up fine and they are working but whenever I click on them(my browser is google chrome), they produce a black rectangle just underneath, they also jump a bit when clicked. the site page is www.spaseafoods.com/Untitled-1.html and you will see the link buttons there, here is the code for the buttons; <a href="Untitled-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','/cooltext446156370MouseOver.png',1)"><img src="/cooltext446156370.png" name="Image7" width="87" height="39" border="0" id="Image7" /> </a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','/cooltext446156370.png',1)"></a> I'm trying to make an image appear/change in response to a rollover, but the image is not in the same table as the rollover. I'm trying to redesign the header of my website, and have come up with this draft: bottleweb.org/test I want an image to appear in between the "BOTTLEWEB.ORG" text and the buttons. If for example I move my mouse over the 'forum' button, I want an image corresponding to 'forum' to appear in between the buttons and the "BOTTLEWEB.ORG" test. Is this possible? I'm about to rip my hair out on this one. I'm using Dreamweaver 8. I have navigation that is using image rollovers to swap. My images that are needed for the rollover to work are in my "assets" folder in the "root" directory. However, when I create the actual html page off the template it is looking for the image in "templates/assets" and therefore does not find the image to swap. I have a number of different navigation buttons and I inserted them all the exact same way. This is the only one that is having this issue, the rest work properly. This is the code that resides on the templates page. Code: <p class="navimage">
<a href="../logset.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Log & Grate Set','','..assets/menu/log_over.jpg'',1)"><img src="../assets/menu/log_default.jpg" alt="Log & Grate Set" name="Log & Grate Set" width="158" height="34" border="0" id="Log & Grate Set" /></a></p>
Notice the Set','','..assets/menu/log_over.jpg. This is the code that is produced when you create an html page from the template. Code:
<a href="logset.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Log & Grate Set',Templates/'','..assets/menu/log_over.jpg'',1
For some reason it is adding the directory templates, and therefore does not find the image. Does anyone know how I can fix this? Thanks, braves07 thanks for helping me Someone on another forum figured it out for me, thanks, please delete this. Hi! I was wondering whether someone could enlighten me (or do it for me), as to how I use URL Parameters. I don't understand javascript, or much html for that matter. I have a page, 'http://goldenlightsoft.org'. I want to set it up so if someone types in 'http://goldenlightsoft.org/index.htm?page=downloads.htm', they would see the normal page, except that the iFrame in the middle ('I1'), would be pointing to downloads.htm of the site, not the normal home.html. I would prefer this system to work without compatibility issues with other browsers, and also I am not sure of the hosts capabilities. I know html and javascript work fine. Can someone help me with this? Thanks, dawmail333 So i decided the other day to redo my website. I hopped on to Notepad++ and got the home page done. However, when i went to test it, all i got were the top four links. Can anyone spot any errors, or tell me why it isn't working? Thanks <html> <body> <style type="text/css"> b { background-color:black; text-color:green; } p { text-color:red; } </style> <a href="home.htm">Home</a> <a href="blogish.htm>Blogish</a> <a href="links.htm">Links</a> <a href="currentguns.htm>Currunt Guns</a> <br/> <br/> <br/> <br/> <br/> Hello, welcome to my extreamly lame webpage... <br/> <br/> Here i will tell you what guns i currently have, and equiptment for them (hoppers, tanks, tank covers, upgrades, etc.). <br/> I will also have a mini blog were i will post updates after every major event at Hell Survivors Inc. I will also put up my war stories. <br/> <br/> <br/> <br/> <br/> <p> WARNING!!! DO NOT PLAY PAINTBALL, You WILL be addicted immediatly, and won't be able to stop. It will drain your funds, and you will <br/> come home every day bleeding and in pain. <br/> <br/> <br/> In other words, its a good thing pballers are crazy and think that the pain is fun, and can go for weeks without eating so they <br/> can afford there 1200 dollar markers... </p> <br/> <br/> <a href="home.htm">Back to Top</a> </body> </html> I have a problem on my forum, in the home page, the forum list is made up of a grid, but the spacing inbetween each spot is too big and therefore it looks kind of stupid. Any ideas? Heres the site http://techoftheweekpodcast.com/index.php ok im trying to get the frames to work on my index page. and they are showing up perfectly when i load the page but when i click one of my links to another page instead of the second column changing to that page, the table of contents column does. Quote: <HTML> <HEAD> <TITLE>World of Warcraft Obsession</TITLE> </HEAD> <!Create two columnwise frames> <Frameset COLS="140,*"> <!define left frame> <FRAME NAME=TOC SRC=TOC.html MARGINWIDTH="5" MARGINHEIGHT="5" SCROLLING=YES> <!define right frame> <FRAME NAME=MAIN SRC=main.html MARGINWIDTH="10" MARGINHEIGHT="10" SCROLLING=YES> </Frameset> </HTML> When the hotspots on my image map are moused over a box of text appears. I need a word (close, in this case) to give the impression of a link, i.e I need the finger pointer to appear. I have written an onClick script that will close the box of text when this "phantom link" is clicked. Any help? I was able to resolve this on my own! Thanks for reading. Hi Everyone, hoping someone can help me here, i'm totally new to html. i work in digital advertising and project manage web development, but i don't know how to troubleshoot html problems, particularly across browsers. The website in question is www.forbetterorpurse.com I built it using the sitebuilder provided by the hosting company. I have two problems (that i know of anyway haha!) 1. The table to the left has somehow increased in width. I don't think I altered anything but no doubt it's something small 2. if you compare the site from IE to Firefox, the background of part of the content area is yellow compared with grey. It's supposed to be grey. if anyone has any ideas or can point me in the right direction, it'd be greatly appreciated! Thanks can you detect if a page is a child? (in an iframe) if (page is a child) { parent.remoteClick('myButton'); } else { } thanks. or the opposite i suppose... if (page is a parent) { } else { parent.remoteClick('myButton'); } So I'm doing a website with horizontal menu that is centered. The page is 100% width, and the menu can be with or without fixed width. The menu is fine otherwise, but the sub items are not next to each other. This is because they only align the width of their parent. However, I'd like them to be centered under their parent regardless of how many sub items there are (so ultimately they could be as wide as the whole menu, provided there were enough sub items). So in the code I now have, the 3 sub items align so that 2 are inline, and the 3rd is under them. These should be inline, stretching over the width of their parent's width. Thanks for the help! Code: <body>
<div id="banner">
<div id="centeredmenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item with Sub</a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Long Sub Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</div>
</div>
</body>
</html>
Code: #banner {
position: absolute;
width: 100%;
height: 100px;
top: 0;
}
#centeredmenu {
height: 55px;
float:left;
width:100%;
overflow:hidden;
position:relative;
top: 0px;
}
#centeredmenu ul {
float:left;
clear: both;
list-style:none;
margin:0;
padding:0;
position: relative;
left:50%;
text-align:center;
}
#centeredmenu li {
width: 180px;
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu a {
display:block;
margin:0 0 0 0px;
padding:0px 10px;
background:#C03;
color:#fff;
text-decoration:none;
}
#centeredmenu ul ul {
position: absolute;
width: 100%;
display: none;
z-index: 400;
}
#centeredmenu ul ul li {
position: relative;
width: 50%;
z-index: 500;
}
#centeredmenu ul li a:hover {
background: #C03;
color: #3FF;
}
#centeredmenu ul li:hover ul{
display: block;
}
Parse error: syntax error, unexpected T_STRING in /home6/comparea/public_html/search.php on line 340 Partnered up with a buddy to build the website compareacollege.com, he bailed out, unfortunately i know very little about web design, site was fine though, until host made me change password, then the search wouldnt work, the above is the error i was getting, i went into into every page and updated password, actually fixed it about half way through except a little coding was showing up on search page, after i updated every password that error is all that showed up on search, now several months later the page doesnt even show up at all, like its a bad link, not sure what do, hopefully you guys can help me out, hopefully an easy fix I need my css menu to stay on top of everything, but there is a .swf with a javascript code that I am using for a slideshow that won't stay under the menu. Any solutions? - THANK YOU! Here's the test page: http://dbk.me/test/intro.html RESOLVED! - Used variable: so.addParam("wmode", "transparent"); Thanks for your help! |
|||||||