HTML - Rollovers Not Working
Hi,
I have a bunch of rollover / mouseover buttons for my web site. They work fine when I upload them to my host (freewebs) However, when I redirect using cjb.net's service, all of the rollover buttons don't work anymore. I was wondering if I could get rollovers to work when people are redirected to my site with a .cjb.net subdomain. Thanks! Well, the normal site is http://freewebs.com/clankapow/ and the redirect site is http://clankapow.cjb.net. Notice that the buttons do not turn yellow in the redirect site. Similar TutorialsHello, I have rollover images (the department blocks) on this page: www.buildersbestdoitcenter.com They work in the preview window of my html editor, and in the IE preview, but they don't work once I post. I'm not a code cruncher, but the error message I get is that there is a missing object. Any help on this would be greatly appreciated. Thanks. KH Hi, I am creating a site in HTML using Dreamweaver. I use rollover buttons to navigate the site which are normally grey but white when rolled over. I have found that when I press the BACK button the button I had previously clicked is white and not grey. Try it out for yourself: http://www.RandAM.org/RichardAsh/ Once the problematic button is rolled over it works normally. Is there a way to stop this from happening? thanks, R hey guys, im totally new here (hense noobwholoves) because i do, i do love web programming but im just new to it. im in bit of a pickle here, and would really appreciate the help. i have a website with 6 circles in 2 rows of 3 that are all black and im trying to make so that whenever i have the mouse on the a black circle the opposite black circle turns red. for example, when i have the mouse over the first black circle, the last black circle turns red and when i take the mouse out the page goes back to having 6 black circles. so ive tried and but it doesnt seem to be working <a onmouseover="set_src('black_dot1', 'red.jpg')" onmouseout="set_src('black_dot1', 'black.jpg')"> <img src="black.jpg" name="black_dot1"> </a> </td> <td> <a onmouseover="set_src('black_dot2', 'red.jpg')" onmouseout="set_src('black_dot2', 'black.jpg')"> <img src="black.jpg" name="black_dot2"> </a> </td> <td> <a onmouseover="set_src('black_dot3', 'red.jpg')" onmouseout="set_src('black_dot3', 'black.jpg')"> <img src="black.jpg" name="black_dot3"> </a> </td> </tr> <tr> <td> <a onmouseover="set_src('black_dot4', 'red.jpg')" onmouseout="set_src('black_dot4', 'black.jpg')"> <img src="black.jpg" name="black_dot4"> </a> </td> <td><a onmouseover="set_src('black_dot5', 'red.jpg')" onmouseout="set_src('black_dot5', 'black.jpg')"> <img src="black.jpg" name="black_dot5"> </a> </td> <td> <a onmouseover="set_src('black_dot6', 'red.jpg')" onmouseout="set_src('black_dot6', 'black.jpg')"> <img src="black.jpg" name="black_dot6"> </a> </td> </td> </table> </body> </html> http://www.cdf.toronto.edu/~c8khanma...stion_two.html what am i do wrong?? http://img64.imageshack.us/img64/2599/buttons1.jpg Is it possible to make rollovers like that? As in, you hover over an icon and the background image of that div changes. So in general, is it possible to hover over a link and make an image that's somewhere else ( not the background of that link) change? Thanks so much. I'm sure this question has come up before, but is there a work-around to make animated gif rollovers play more than once in IE? In FF, the rollovers play every time you mouseover (or, they start over). Here is my first attempt at a website from scratch: www.andymcginnis.com. You will see what I mean by rolling over the links. There's kind of like a waterfall effect. Thanks for any reply Hello, I am currently doing a small project on Yahoo - Geocities, and decided to add some Image Rollovers. I keep running into a problem though, and I'm not sure why. I'm not even close to a expert in HTML, which is probably why I'm having a problem. Anyways, could someone give me the HTML text that is involved in making a Image Rollover?... or pointing me to a very detailed tutorial explaining Image Rollovers will suffice. Also, is it true that Rollovers only work with GIF images? Any help is greatly appreciated hello, I am having a problem with some rollover graphics... the file works fine when I view on my local system, but once I upload to the server, the rollovers dont work anymore? I have no idea why... here is a link to the page: http://www.tryfluid.com/keepit/index.html I created the main navigation panel in fireworks. I then cut and paste the info into my site. Here is a link to the actual file that fireworks created: http://www.tryfluid.com/keepit/ARTheader_noSlice.html I am very new to fireworks, I used to use Imageready but recently upgraded to CS4 and Imageready has been discontinued. I can't figure out why the rollovers don't work once I upload the files... any help would be greatly appreciated... Thanks! Allen Im trying to make some links on my website: http://the1337arcade.com But i want them special links, so when people roll their mouse over them, it takes automatically to that page, and then on that page that they automatically go to, i want a back button so they can return to their previous place.. I know this is possible, because i have seen it before.. Please Assist me on this Thanks abunch ANup At the top of http://www.eastofedenevents.com/, the nav buttons all change except the "location" one-- It will not highlight in Firefox, on my Mac. It works fine in Safari, on a mac. Why is this? Thank you. Hey guys, My company is building this website and it seems like we're having quite a bit of trouble with the rollovers and their alignment in Internet Explorer versions before 7. It would be awesome if any of you could give us some insight as to why (other than asking customers to upgrade their explorer or switching to firefox). Another thing is the portfolio section is falling a little too far below the title for a designer's comfort (we're a graphic design studio... not web experts).... how might I be able to fix it? I want to thank everyone who's helped us in the past and hope someone can help us again! Theia Hi guys, this is the site: http://eksow.com/ This the the source code for it: Quote: <html> <head> <title>Eksow Event Design & Management</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <SCRIPT TYPE="text/javascript"> <!-- // copyright 1999 Idocs, Inc. http://www.idocs.com/tags/ // Distribute this script freely, but please keep this // notice with the code. var rollOverArr=new Array(); function setrollover(OverImgSrc,pageImageName) { if (! document.images)return; if (pageImageName == null) pageImageName = document.images[document.images.length-1].name; rollOverArr[pageImageName]=new Object; rollOverArr[pageImageName].overImg = new Image; rollOverArr[pageImageName].overImg.src=OverImgSrc; } function rollover(pageImageName) { if (! document.images)return; if (! rollOverArr[pageImageName])return; if (! rollOverArr[pageImageName].outImg) { rollOverArr[pageImageName].outImg = new Image; rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src; } document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src; } function rollout(pageImageName) { if (! document.images)return; if (! rollOverArr[pageImageName])return; document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src; } //--> </SCRIPT> <!-- ImageReady Slices (Untitled-1 copy.psd) --> <Center> <table id="Table_01" width="1024" height="769" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="6"> <img src="images/Eksow_01.jpg" width="1024" height="261" alt=""></td> </tr> <tr> <td rowspan="4"> <img src="images/Eksow_02.jpg" width="65" height="507" alt=""></td> <td> <A HREF="#" onMouseOver = "rollover('left')" onMouseOut = "rollout('left')" ><IMG SRC="http://eksow.com/images/Eksow_03.jpg" NAME="left" ALT="Home Page" BORDER=0 ></A> <SCRIPT TYPE="text/javascript"> <!-- setrollover("http://eksow.com/images/Rollover_1_03.jpg"); //--> </SCRIPT> </td> <td colspan="2"> <A HREF="#" onMouseOver = "rollover('middle')" onMouseOut = "rollout('middle')" ><IMG SRC="http://eksow.com/images/Eksow_04.jpg" NAME="middle" ALT="Home Page" BORDER=0 ></A> <SCRIPT TYPE="text/javascript"> <!-- setrollover("http://eksow.com/images/Rollover_2_04.jpg"); //--> </SCRIPT></td> <td> <A HREF="#" onMouseOver = "rollover('right')" onMouseOut = "rollout('right')" ><IMG SRC="http://eksow.com/images/Eksow_05.jpg" NAME="right" ALT="Home Page" BORDER=0 ></A> <SCRIPT TYPE="text/javascript"> <!-- setrollover("http://eksow.com/images/Rollover_3_05.jpg"); //--> </SCRIPT></td> <td rowspan="2"> <img src="images/Eksow_06.jpg" width="78" height="491" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/Eksow_07.jpg" width="881" height="262" alt=""></td> </tr> <tr> <td colspan="5"> <A HREF="#" onMouseOver = "rollover('bottom')" onMouseOut = "rollout('bottom')" ><IMG SRC="http://eksow.com/images/Eksow_08.jpg" NAME="bottom" ALT="Home Page" BORDER=0 ></A> <SCRIPT TYPE="text/javascript"> <!-- setrollover("http://eksow.com/images/Rollover_4_08.jpg"); //--> </SCRIPT></td> </tr> <tr> <td colspan="2"> <img src="images/Eksow_09.jpg" width="567" height="8" alt=""></td> <td> <img src="images/Eksow_10.jpg" width="21" height="8" alt=""></td> <td colspan="2"> <img src="images/Eksow_11.jpg" width="371" height="8" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="65" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="292" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="275" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="21" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="293" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="78" height="1" alt=""></td> </tr> </table> </center> <!-- End ImageReady Slices --> </body> </html> Here is what I'm trying to accomplish, but have no idea where to start from... 1. When people go to the site, the pictures at the bottom don't appear 2. When people click on "Hospitality Night" (far left), then the pictures appear 3. When it's clicked, the rollover image stays (white box) So in laymans terms... I go to the site, I click on far left link, pictures show. I click on the middle link, diff pictures show i click on the right one, different pictures show. && done I've found a website that shows my Steam status every amount of time, just like the rest of other websites. This banner or gamecard should show if i'm online, what i'm playing and other stuff that is in the gamecard. The website has an option for yourself to put your own PNG image as the card's background. I entered the link correctly of the image and after that it gave me the codes to put them wherever i want. The problem is that when i submit the code wherever i want (Forums) the image doesnt show but the code in text itself. The PNG had transparent parts so i tried on a pure black background, didnt work either. Then i noticed the code has some different values/elements from the included images that the website comes with. This is the code of my custom PNG image: Code: http://steamsigs.com/steam.php?id=ik....png&tborder=1 And this is with the default image of the website: Code: http://steamsigs.com/steam.php?id=ik...rmal&tborder=1 I also tried different text borders and options. You can try yourself doing the gamecard he www.steamsigs.com You will need a custom Steam ID url, but you can use mine: ikamikaze15 And if it could be something wrong with the image, here it is: http://i1000.photobucket.com/albums/...ndoGR15/ua.png Thanks for helping. Hi Guys, I have this link: <a href="programs/XMLPoster.exe">programs/XMLPoster.exe</a> It works when i view it in Firefox, but gives me an error when i click it in i.e? Do you know why this is happening? Ideally i want to be able to launch the .exe file and not just ask the user if they want to save it? Thanks, Chloe ~X~ Hi guys, For some reason, in IE8, on product pages (Example) of my ecommerce site, the 'Size Chart' and 'Email to a Friend' popups don't work, and the product image lightbox won't work either. I have turned pop-up blocker off but they still don't work. These popups work in every other browser I have tested in, including IE7. It seems to only be IE8 that is having this problem. Upon looking at the page source, one thing I have noticed that both the 'Size Chart' and 'Email to a Friend' buttons have in common, is that the popups seem (I'm far from an expert) to be 'triggered' by a span element (class="more") within the HTML. For example: Code: <div class="row "> <label >Size: </label> <strong class="fl"><select name="size" id="size" onchange="checkstock(this.value)"><option value="">Select Size</option><option value="S">S</option><option value="M">M</option><option value="L">L</option><option value="XL">XL</option><option value="XXL">XXL</option></select></strong> <span style="text-decoration: underline;" class="size_chart more" title="size_chart1">+ Size Chart</span> <div style="display: none;" class="size_chart1 hide" > <div class="close"></div> <img src="http://www.projectdisobey.com/disobeyclothing/wp-content/themes/eCommerce3/images/size_chart.jpg" alt="" /> </div> <!-- size chart --> </div> Code: <ul class="fav_link"> <li class="print"><a href="#" onclick="window.print();return false;">Print</a> </li> <li class="rss"><a href="http://feeds.feedburner.com/DisobeyClothing">RSS</a> </li> <li class="emailtofriend"><span style="text-decoration: underline;" class="more" title="tellafrnd_div">Email to a Friend</span> </li> <li class="blank"><span id="tellafrnd_success_msg_span"></span></li> <li class="blank"><div style="display: none;" id="tellfrnddiv" class="tellafrnd_div hide"> <iframe src="http://www.projectdisobey.com/disobeyclothing/?page=tellafriend_form&pid=402" style="border: medium none ; width: 547px; height: 558px;" frameborder="0" ></iframe> </div> </li> <li class="share"> <div class="a2a_kit addtoany_list"><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.projectdisobey.com/disobeyclothing/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/></a></div> <script type="text/javascript"><!-- var a2a_config = a2a_config || {}; a2a_config.linkname="Know Your Enemy"; a2a_config.linkurl="http://www.projectdisobey.com/disobeyclothing/?p=402"; a2a_config.color_main = "f3f3e7";a2a_config.color_border = "C0C88A";a2a_config.color_link_text = "332402";a2a_config.color_link_text_hover = "332402";a2a_config.color_bg = "7f6f2"; a2a_config.num_services = 14; //--></script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script> </li> </ul> I have no idea what could be stopping the lightbox from working. Anybody have any suggestions as to what the problem might be (and how I can rectify it)? If you need more info, let me know... Thanks! i have installed IIS 5.1 in my XP machine but when i type http://localhost it shows a blank page. Hi, I'm a self-taught web designer with not a lot of experience and need some help please! This website shows up perfectly in Chrome + Firefox, but it completely fails in IE. http://fparchitectural.ca/beta/ I'm guessing it's a css/div issue. Hopefully it is a simple fix. Please Help. Hey all I have just joined these forums as I am learning HTML and CSS. However the book that I am following does not appear to be working. I have created a custom class in css called "Stewart" and a test page to test it however it does not appear as I have defined. Below is the code for the CSS page Quote: <!-- A CSS style sheet --> body { font-size: 10pt; font-family: Arial; color: black; line-height: 14pt; padding-left: 5pt; padding-right: 5pt; padding-top: 5pt; } h1 { <!-- ALso possible to define different classes see SAM's teach yourself HTML and CSS p59 --> background-color: pink; font-size: 14pt; font-family: Arial; font-weight: 20pt; color: red; } h2 { font-size: 12pt; font-family: Arial; font-weight: 20pt; color: red; } h3.silly {font: 36pt Comic Sans; } h3.serious {font: 8pt Arial; } p.subheader { font-weight: bold; color: green; } <!-- Custom Class, use the div heading to create a custom class --> DIV.stewart {font-size: 30pt; color: red; font-style: italic; } And here is the code for the test page Quote: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <!--The above is a link to the css file in this directory --> <title>CSS Test sheet</title> </head> <body> <h1> This is a test sheet for my css, it might possibly look different every time. </h1> <h3 class="silly"> Silly</h3> <p> The above text is silly class of heading 3</p> <h3 class="serious">serious</h3> <p> The above text is serious class of heading 3 </P> <p> <div class="stewart">This is my own custom style</div> </p> </body> </html> Can someone please explain where I am going wrong. I am using IE on WIndows 7. I have a code for div and the strange thing is that it is working in empty html code but if i put it in an existing html code then it will not work! please help!!! I'm new to this forum and was not quite sure where to post this but I am having some trouble putting this code I made into my myspace and making it work. It shows up correctly on the normal browser but when I go to add it to my page it doesn't work. Any help would be appreciated. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <style type="text/css"> #picturebox { background: #transparent; background-image:url('http://img231.imageshack.us/img231/6485/tvphotosmallergs4.jpg'); background-repeat: no-repeat; position: absolute; top: 0px; left: 0px; width: 800px; height: 631px; } #moviebox { background: #FFFFFF; background-repeat: no-repeat; position: absolute; top: 120px; left: 168px; width: 400px; height: 300px; } </style> </head> <body> <div id="picturebox"> <div id="moviebox"> <object type="application/x-shockwave-flash" width="400" height="300" data="http://www.vimeo.com/moogaloop.swf?clip_id=721534&server=www.vimeo.com&fullscreen=1&show_title=1&show_byline=1&show_portrait=0&color="> <param name="quality" value="best" /> <param name="allowfullscreen" value="true" /> <param name="scale" value="showAll" /> <param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=721534&server=www.vimeo.com&fullscreen=1&show_title=1&show_byline=1&show_portrait=0&color=" /></object> </div> </div> </body> </html> Thank you! |