|
HTML - Onmouseover And Onclick Problem.
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! Similar TutorialsHi, After messing around with my script so many time i cant get it to work and i am not sure if i messed up something along the way. Basically what i want to do is have a table that highlights to one color when mouse is on the table and changes back to the original color onmouseout. In addition, having the table produce a sound when i put my mouse on it. So when i put the mouse on the table it should change color and play sound. Then when i click on the link on the table it should make a different sound and take me to the page. I am lost now and i am having a hard time figuring out or finding a simple code that could work. Here is my code. Changing colors on the table works but the sound effects within the same code is giving me trouble. So i just deleted any code i put and left it the way i had it before i started messing with it. sound files are in the my root folder. <Html> <Head> <script LANGUAGE="JavaScript"><!-- // Preload and play audio files with event handler (MouseOver sound) // designed by JavaScript Archive, (c)1999 // Get more free javascripts at http://jsarchive.8m.com var aySound = new Array(); // Below: source for sound files to be preloaded aySound[0] = "Mouse Click 1.wav"; aySound[1] = "wood-cracking-1.mp3"; // DO NOT edit below this line document.write('<BGSOUND ID="auIEContainer">') 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> </head> <body> <td width="131" id="side1" onclick="playSound(0)" onmouseover="this.style.background='#9CF';this.sty le.cursor='pointer'" onmouseout="this.style.background='white';">{In this part was were i had the other mouse over affect to play sound (1) but didnt work} <a href="www.mypage.html">Cats</a></td> </body> </html> Thanks in advance Hi, First off, I can't post a link to the site. The issue exists on a private intranet. Our boss requested business process diagrams from all departments done in Visio. He then discovered that the diagrams could be 'Save(d) as a Web page' from within Visio. As the webmaster, I was asked to convert all Visio diagrams to .htms, post them to the site and create functionality so if someone clicked one of the figures within the .htm process diagram a small window would pop with a two-cell table. Easy enough...the top cell shows 'Previous << Step # >> Next' with previous/next linked to instructions corresponding to the earlier or later figures on the diagram; the lower cell describes the process step. As you'd expect, clicking previous or next takes you to the respective instructions corresponding to the previous or next step. Getting this working to this point was not a problem...here's the problem: 1) Using 'onclick,' when a user hovers over a figure on the .htm page and clicks, a small window pops. 2) If the user then clicks again on the diagram (not either the previous or next links), then the small instructions window hides itself behind the diagram window. (The only benefit to this is that if the user clicks a different figure from the diagram than the one for the instructions currently shown, the instructions window changes to the instructions of the newly clicked figure.) 3) If I add 'onfocus' to keep the small window on top, the instructions window does not go away, but it also does not change to the new instructions if the user clicks a new figure from the diagram. Without javascript, I'd like for the small instruction window to stay 'Always on top,' and for the content in the small window to change when the user clicks a different figure from the .htm diagram page. Any suggestions? Gidday gang, I'm currently trying to iron out some bugs in a site I'm working on, and one of them really has me stumped. The problem exists in both IE 6 & 7 - it does not exist in Firefox, Opera, Netscape or Safari. Explanation: (it's probably easiest to see this for yourself: Go to the page When a user mouses over a thumbnail, it triggers the "onmouseover" event, which changes the source of 'image380' from nothing to the (full-size) thumbnail image. The problem is that in IE, the mouseover also causes the margin-left and margin-top CSS to disappear, and the thumbnail re-aligns itself into the top-left hand corner (not centered). The margin-left:4px;margin-top:2px; CSS is in the thumbborder class. I've tried adding .thumbborder a:hover with the relevant margins to my css (no difference) If anyone has any suggestions I'd be really appreciative - this one really has me stumped. :-S Cheers, - JB HTML: Code: <a class='thumbnail' href='template.php?templateid=380'> <img src='images/bid_andreas02_thumb.png' class='thumbborder' border='0' onmouseover='document.images.image380.src="images/bid_andreas02_full.png"' alt='bid_andreas02' /> <span> <img name='image380' src='' alt='bid_andreas02' /> <br /> bid_andreas02 </span> </a> CSS: Code: .thumbborder {
border: solid 1px #CCC;
margin-left:4px;
margin-top:5px;
width:140px;
height:112px;
}
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffe0;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
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!!! 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? Any good onmouseover tutorials? Thanks. 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? 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? 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 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. 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 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'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.... How do I use onMouseover to change text when the viewer runs the mouse over the link or text? Thanks! Hi: - All of the left-menu icons correctly highlight when I scroll over them except for the one (which I have most recently added to the site) - All of the left-menu icons correctly remain highlighted when I travel to any given corresponding destination page on the site Here's the function call of the menu button in question...this is logically identical to the other function calls invoking mouse-over "highlighting": <div><a href="destination.html" onmouseover="java script:rollOver('ln_07','ln_07_ov');" onmouseout="java script:rollOver('ln_07','ln_07');"><img src="img/ln_07.jpg" name="ln_07" alt="Destination" width="126" height="26" border="0"></a></div> Just to restate: the scroll-over highlights are correctly invoked in all instances with the exception of the one menu icon applicable to all pages of the site except its destination page (where it correctly remains in highlight mode...) Many thanks-- BR Hi folks, I'm developing a website for work and one of the features I want to implement is when the user hovers their mouse over an item in a drop down menu the proper trigger is fired. In FF and Opera it works beautifully though IE 7 is giving me serious grief. My HTML is as follows: <select name="Admin Dropdown" style="width:250px; position:relative; top:-66px; left:10px" /> <option value="Profile" id="ProfileOpt" onmouseover="profileDesc();" onClick="profileEdit();" onSelect="profileEdit();" />Edit Profile</option> <option value="Employees" id="EmployeesOpt" onmouseover="employeesDesc();" onClick="employeesEdit();" />Edit Employees</option> <option value="Menu" id="MenuOpt" onmouseover="menuDesc();" onClick="menuEdit();"/>Update Menu</option> </select> The functions modify a text box on the form as follows: document.adminForm.Instructions.value = "..."; I have a little init statement that executes the following on each of the elements in the menu: ... var element = document.getElementById( "ProfileOpt" ); element .onmouseover = descFunction(); ... It appeared to me that there were some incompatibility issues with some events and IE but maybe someone out in HTML-world can clear this up for me. Thanks! 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 |
|||||||