|
HTML - Onmouseover Faster
I've got a problem...I make a page...only for training.....but i've got some problem with the HOVER...i have to wait a long time and after,the HOVER is work.Can help me someone to make it faster?pls..here is the page http://piticu.byethost14.com/site2/index1.php and the code for the submenu
Code: <td valign="top" id="left_menu"> <table border="0"> <br /> <tr> <td style="border:0" align="center"> <b><i><h2 style="color:#FFDEAD;text-decoration:underline overline">CATEGORIES:</h2></b></i> <a href="" onmouseover='animal.src="submenu/animal2.png"' onmouseout='animal.src="submenu/animal.png"'><img src="submenu/animal.png" name="animal" border="0"></a><br /> <a href="" onmouseover='car.src="submenu/car2.png"' onmouseout='car.src="submenu/car.png"'><img src="submenu/car.png" name="car" border="0"></a><br /> <a href="" onmouseover='cartoon.src="submenu/cartoon2.png"' onmouseout='cartoon.src="submenu/cartoon.png"'><img src="submenu/cartoon.png" name="cartoon" border="0"></a><br /> <a href="" onmouseover='celebrity.src="submenu/celebrity2.png"' onmouseout='celebrity.src="submenu/celebrity.png"'><img src="submenu/celebrity.png" name="celebrity" border="0"></a><br /> <a href="" onmouseover='digital.src="submenu/digital2.png"' onmouseout='digital.src="submenu/digital.png"'><img src="submenu/digital.png" name="digital"border="0"></a><br /> <a href="" onmouseover='fantasy.src="submenu/fantasy2.png"' onmouseout='fantasy.src="submenu/fantasy.png"'><img src="submenu/fantasy.png" name="fantasy"border="0"></a><br /> <a href="" onmouseover='fine.src="submenu/fine2.png"' onmouseout='fine.src="submenu/fine.png"'><img src="submenu/fine.png" name="fine"border="0"></a><br /> <a href="" onmouseover='holiday.src="submenu/holiday2.png"' onmouseout='holiday.src="submenu/holiday.png"'><img src="submenu/holiday.png" name="holiday" border="0"></a><br /> <a href="" onmouseover='nature.src="submenu/nature2.png"' onmouseout='nature.src="submenu/nature.png"'><img src="submenu/nature.png" name="nature"border="0"></a><br /> <a href="" onmouseover='movie.src="submenu/movie2.png"' onmouseout='movie.src="submenu/movie.png"'><img src="submenu/movie.png" name="movie"border="0"></a><br /> <a href="" onmouseover='space.src="submenu/space2.png"' onmouseout='space.src="submenu/space.png"'><img src="submenu/space.png" name="space"border="0"></a><br /> </td> <tr> </table> </td> and here is for the submenu left: Code: <td valign="top" id="content"> <table border="0" width="700px" class="one" align="center"> <br /> <tr align="center"> <td colspan=3 align="center" style="border:0"> <b class="one" style="color:#FFDEAD"><u><i>Top Quality Free Wallpaper for your Desktop</i></u></b><br /> <b style="color:#FFDEAD">Click on images to see the whole selection of wallpapers in each category<b><br /><br /> </td> </tr> <tr valign="middle" align="center"> <td style="border:0;color:#FFDEAD"> <b>Animals:</b><br /> <a href="animals.htm" onmouseover='animals.src="images/animals1.jpg"' onmouseout='animals.src="images/animals.jpg"'><img src="images/animals.jpg" name="animals"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Cars:</b><br /> <a href="cars.htm" onmouseover='cars.src="images/cars1.jpg"' onmouseout='cars.src="images/cars.jpg"'><img src="images/cars.jpg" name="cars"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Cartoons:</b><br /> <a href="cartoons.htm" onmouseover='cartoons.src="images/cartoons1.jpg"' onmouseout='cartoons.src="images/cartoons.jpg"'><img src="images/cartoons.jpg" name="cartoons"></a> </td> </tr> <tr valign="middle" align="center"> <td style="border:0;color:#FFDEAD"> <b>Celebrities:</b><br /> <a href="celebrity.htm" onmouseover='celebs.src="images/celebs1.jpg"' onmouseout='celebs.src="images/celebs.jpg"'><img src="images/celebs.jpg" name="celebs"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Digital Art & 3D:</b><br /> <a href="digital.htm" onmouseover='digit.src="images/digital1.jpg"' onmouseout='digit.src="images/digital.jpg"'><img src="images/digital.jpg" name="digit"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Fantasy Art:</b><br /> <a href="fantasy.htm" onmouseover='fantas.src="images/fantasy1.jpg"' onmouseout='fantas.src="images/fantasy.jpg"'><img src="images/fantasy.jpg" name="fantas"></a> </td> </tr> <tr valign="middle" align="center"> <td style="border:0;color:#FFDEAD"> <b>Fine Art:</b><br /> <a href="art.htm" onmouseover='art.src="images/art1.jpg"' onmouseout='art.src="images/art.jpg"'><img src="images/art.jpg" name="art"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Holidays:</b><br /> <a href="holidays.htm" onmouseover='holi.src="images/holidays1.jpg"' onmouseout='holi.src="images/holidays.jpg"'><img src="images/holidays.jpg" name="holi"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Natu </b><br /> <a href="nature.htm" onmouseover='natur.src="images/nature1.jpg"' onmouseout='natur.src="images/nature.jpg"'><img src="images/nature.jpg" name="natur"></a> </td> </tr> </table> </td> I'm sorry if i make some mistakes on the post.... Similar TutorialsHey guys(and girls ), Here is my problem i would like to make a webpage like this: ---------------------HEADER--------------------- ---------------------php script------------------- ---------------------FOOTER--------------------- (Show Word) <-- When i click this, the page will be refresh so the php script will echo a random word, but if i do that every time i refresh the page i dont want to refresh the Header and Footer. My idea was to use iFrames... Is there any other way? Thnxs!!! There are download managers (such as DAP, etc.) which can download parts of files from different mirrors and assemble them on the same pc. Your users will need one of these installed to download the file, or you could send them your own download manager. If using a ready made download manager they'll need to enter the urls of the two mirrors of the file. My HTML knowledge is limited as I am a new to the web design world. From 1-10 of my knowledge of HTML I would say I am at a 6. I have recently created a website using Dreamweaver CS5 and I would like to know how can I control cacheing on my website? I googled this but I dont know how to implement it. I would like people to cache my page so the next page they go on will load faster but I do want to update content once a week. How can I do this? thank you. I have created an image map using a map of the USA. In this map it displays our home office and branch locations. I would like for a small box to appear (and stick) that displays the office address when/if the star or other icons are passed over. I have not done this since college and have no clue what to script. LOL, can anyone help an old fart? Any good onmouseover tutorials? Thanks. It won't work.... HTML Code: <a href="index.html"
onmouseover="window.status='home'; changeImages('home', 'images/home-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('home', 'images/home.jpg'); return true;"
onmousedown="changeImages('home', 'images/home-over.jpg'); return true;"
onmouseup="changeImages('home', 'images/home-over.jpg'); return true;">
<img name="home" src="images/home.jpg" width="109" height="100" border="0" alt="home"></a>
any help? Hi! I've something like that:: <body> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1"> <tr> <td width="36%">Contact</td> <td width="26%"> <p align="center"> <img border="0" src="IMAGE URL ..."></td> <td width="38%"> </td> </tr> </table> </body> How can i make to when i pass mouse in Contact display another image in middle colunm? Can you help me? Hi All, I would like to create a little message box when the user puts the mouse cursor on a text entry in a table. The message box would contain text only. Can someone point me in the right direction for the code to do this? What I have found so far calls another webpage. Is that the only way to do it? Thanks!!! Hi Colls, I have a task such this: At onmouseover, i need to swap the jpg with marquee text. I have tried a lot of things but probably i think in wrong direction. Coudl you help about it? Thank you in advance. Is there anyway I can have a line of text in my FAQ's on my website with a onmouseover command to drop down a box with the answer to the question? Thank you in advance, Regards, Josh On my employer's site, I am trying to create certain mouseover events for the navigation bar. My goal to to either create alternate colored text on mouseover (which it currently does) and return to normal text (either link color or vlink color, which it doesn't), or change the text background color on mouseover, and back on mouseout (with appropriate colors, link/vlink). The code is as follows: <table width="740" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td width="100%" height="7" align="center" valign="top" colspan="1"> <font color="#707BA8" face="Trebuchet MS" size="5"> <a href="index.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">Home</font></a> <a href="about.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">About Us</font></a> <a href="contact.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">Contact Us</font></a> <a href="links.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">Links</font></a> <a href="questions1.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">Q&A</font></a> </td> </tr> </table> With the body defined as follows: <body bgcolor=#FFFFFF background="images/bg1.jpg" link="0000FF" vlink="#4B0082" alink="#57E964"> Any assistance is appreciated, thanks. I have a table on my page in which I have overridden the onmouseover and onmouseout event handlers. Those event handlers get called just fine when the mouse enters or leaves any of the objects contained within the table, but they do not get called when entering or leaving the table itself. Is that the expected behavior? I would have thought that those handlers would also get called for the table itself. Do I need to attach those event handlers to a higher level object (containing the table) in order for them to get called upon entry and exit of the table? Interestingly, the event handlers get called when entering or leaving a cell (a td item) of the table, but they do not get called when entering or leaving a row (a tr item) of the table. I would be happy if I could make it call the event handlers for the row as well, but so far have had no luck doing that. Hello, I have a site with a big picture that use <area> and <map> tags. How can I replace piece of the big picture, by other image using OnMouseOver or by other way? (The image is defined by coords) Thank You! Big Image, and the image that I need to replace. hi everyone, I have a small problem. I want to implent the facebook (like), twitter (tweet) and Hyves (respect) buttons on my website. However, I dont like the styles of either one. Because they are using an iFrame, Im not able (or my skills limit me..) to change their looks. So I was thinking about creating an onmouseover event. A picture at first and when onmouseover it changes to the actual button. (IF there is a better way of hiding the button but still keep its functionallity, please tell me) The problem starts when I want to code it. I have no clue what so ever how to get this to work. Perhaps someone here can help me out? Because I have never worked with events in Expression Web 4. Thanks in advance! Ferdri3 PS. Behavior -> swap image (+ editting second img url doesnt work) Im using expression web 4 Hi Guys/Girls, Im in a sticky situation i have been searching the web and forums for a tutorial or example on how to create a popup box when the mouse cursor glides over it. what i want to achieve is something like this if you can please browse to http://www.uncle-buck.co.uk/Need-Mon...ncle-Buck.htm# if you hover over "See representative example >" you will see a popup box appear i want to achieve just that im not fussed on the color etc at the moment i ideally would like to get the functionality working correctly and then make it look nice later. if someone can help me i really would appreciate or even better if you know of or have seen a tutorial based on this then please do share it with me. Hope to hear from someone soon. Thanks Good day everyone. For my job, I've been tasked to create a page with some images on it. When you put your mouse over one images, it is suppose to open a web page, an other document or an other images in a popup window, and the popup should close itself when you remove your cursor from over the image. Also, if you click on the image, the popup should stay open, so you can get more information and browse the page if you want... I have some basic knowledge of HTML but I consider myself a beginner, and I can't see how to solve this problem. I'm using dreamweaver 8 to do my pages. I also have access to firework if more fancy images techniques are required.. I tried the following basic code: <body> <a target="_blank" href="http://www.google.com/" onmouseover="window.open(this.href, 'popupwindow', 'width=400, height=300, scrollbar, resizable'); return false;">Example</a> </body> But the problem is that the popup pages open corretly but I don't know how to make it close. Also, I'm like it to be a hotspot on an image, and not just a word... If I can please have some advice on how to do this, it would be very appreciated! Hi, i was wondering how do you show certain text such when the mouse is over the radio button. I tried <input type="radio" value="test" name="test" alt="mouse over radio"> test but the word "mouse over radio" does not pop, anyone have any idea? Thanks in advance. so I am building a website, and I decided to test out a code before doing any major programming. Of course, it didn't work. I basically need a square covered in thumbnails of images, but then when the mouse is moved over a thumbnail the full-size image will show in that square (overtop of the thumbnails) until the mouse is moved off of the thumb. right now, however, it will not work on mouseover, but needs to be clicked on and only shows while the mouse button is held. I am relatively new to DIV codes other than their use for alignment, but I think it might have something to do with layering? I got the code from he http://www.technorealm.co.uk/scripts...rshowtext.html and altered it to include my content, but as I was looking through the code I noticed there was no z-index within the DIV tag. Also, I know quite a bit about HTML but not very much about CSS, JavaScript, etc. Below is the code for the entire page, which you can view at this address: http://www.freewebs.com/tintedlens/ Any help would be appreciated! Thanks! <html> <head> <title>Photos.</title> <script language="Javascript"> <!-- function toggleDiv(id,flagit) { if (flagit=="1"){ if (document.layers) document.layers[''+id+''].visibility = "show" else if (document.all) document.all[''+id+''].style.visibility = "visible" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" } else if (flagit=="0"){ if (document.layers) document.layers[''+id+''].visibility = "hide" else if (document.all) document.all[''+id+''].style.visibility = "hidden" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" } } //--> </script> <style type="text/css">#div1, #div2, #div3 {position:absolute; top: 91; right: 91; visibility:hidden}</style> </head> <body bgcolor="FFFFFF"> <div id="link1" style="position: absolute; top: 100; right: 100;"> <a href="#" onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)"><img border="0" src="link1.jpg"/></a> </div> <div id="link2" style="position: absolute; top: 190; right: 100;"> <a href="#" onMouseOver="toggleDiv('div2',1)" onMouseOut="toggleDiv('div2',0)"><img border="0" src="link2.jpg"/></a> </div> <div id="link3" style="position: absolute; top: 280; right: 100;"> <a href="#" onMouseOver="toggleDiv('div3',1)" onMouseOut="toggleDiv('div3',0)"><img border="0" src="link3.jpg"/></a> </div> <div id="div1"><img border="0" src="image1.jpg"/></div> <div id="div2"><img border="0" src="image2.jpg"/></div> <div id="div3"><img border="0" src="image3.jpg"/></div> </body> </html> <a onmouseover="ddrivetip('<b>Purple Parasol</b><br /> 1.0 HC Sofas<br />Status:Stable','white', 125)" ;="" onmouseout="hideddrivetip()"><img src="http://omgvalues.net/images/pparasol.gif" border="0"></a> While the page loads, this mouseover works just fine (theres around 1,000 other mouseovers) after the page loads, my mouseovers do not work.. OMGValues.net is my URL. My site works JUST based on mouseovers. Furnivalues.net is where they gave me their layout, so our sites are similar their roll-overs do work, where our ones STOP working. Please help thank you ) Hey guys. I'm having a little trouble manipulating this image the way I want to. Here's my goal: I have a large image of the city of Louisville and additional images of that are identical, but have certain regions/neighborhoods highlighted. I'm wanting to have the image displayed in full and when the user hovers over a certain area, or part of the city, then the image with that area highlighted is displayed until onMouseOut. Here's what I have so far, the onmouseover doesn't seem to be working at all. Code: <html>
<head><title>xxxx</title>
<script language="JavaScript">
<!--
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 mouseOver() {
document.louisville.src = "images/Louisville_Downtown.JPG";
}
function mouseOut() {
document.louisville.src = "images/Louisville_Full.JPG";
}
//--></script>
</head>
<body onLoad="MM_preloadImages('images/Louisville_Full.JPG','images/Louisville_Audubon.JPG',
'images/Louisville_Downtown.JPG','images/Louisville_Poplar_Newburg.JPG','images/Louisville_Shively.JPG','images
/Louisville_ValleyStation.JPG')">
<center>
<FONT size = "5"><B>Louisville Neighborhoods</B></FONT>
<br>
<img id="pic" src="images/Louisville_Full.JPG" alt="" usemap="#louisville" border="0" name="louisville">
<map id="louisville" name="louisville">
<area shape="rect" coords="0.000, 0.000, 7.000, 7.000" onmouseover="mouseOver()" onmouseout="mouseOut()">
</map>
</center>
</body>
</html>
The coords aren't setup correctly yet, but I'm just trying to get it to do something. Any help would be appreciated. -Tyler |
|||||||