|
JavaScript - Mouseover Issue
Hello,
I've got a strange image with mouse overs on a menu. my code; Code: function SwapImage(strName,strImage){
ImageFlip= new Image()
ImageFlip.src = "images/" + strImage;
var strImageOn = document.getElementById(strName);
strImageOn.src = ImageFlip.src; return true;
}
<table border='0' cellpadding='5' cellspacing='5'>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem1','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem1','MouseOut.png');\"><a href='/'><img src='images/home_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem1' /></td>
</tr>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem2','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem2','MouseOut.png');\"><a href='/artwork.php'><img src='images/artwork_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem2' /></td>
</tr>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem3','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem3','MouseOut.png');\"><a href='/artists.php'><img src='images/artists_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem3' /></td>
</tr>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem4','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem4','MouseOut.png');\"><a href='/about.php'><img src='images/about_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem4' /></td>
</tr>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem5','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem5','MouseOut.png');\"><a href='/links.php'><img src='images/links_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem5' /></td>
</tr>
</table>
this is in a php page, thats the reason for the extra slashes/espaces. for some reason, only the last row of the menu works with the mouse over, maybe I'm missing something, but it seems like it should all work. any ideas would be really helpful. cheers, -Ken Similar TutorialsI'd seriously appreciate some guidance with the following:- The site in question: http://www.professorbet.com/2010/football2010win.php The problem: Popups work fine, as they open the mini thumbnails when you mouseover. However, as you scroll down the page, the images move with you. So, if you mouseover'd the top result (having not scrolled down) the graph would appear when it was supposed to. However, if you scrolled down 200px, and then mouseover'd the top result (or any result), the thumbnail would popup 200px lower than it should. The guide site I used: http://www.dynamicdrive.com/dynamici...agetooltip.htm - it doesn't happen on their site (potentially because they're not as stupid as me). I set up a dummy site of their site: http://www.professorbet.com/1.htm - I just copied the source code for everything and changed literally nothing. It still happens on my version of the site. If this is a simple fix that anyone knows, I would love the help. If not, I'll just continue crying myself to sleep. Thank you in advance! Code: <script type="text/javascript" src="ddimgtooltip.js"> /*********************************************** * Image w/ description tooltip v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> Code: /* Image w/ description tooltip v2.0
* Created: April 23rd, 2010. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
var ddimgtooltip={
tiparray:function(){
var tooltips=[]
//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}]
tooltips[2]=["../dynamicindex14/winter.jpg"]
tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]
return tooltips //do not remove/change this line
}(),
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
//***** NO NEED TO EDIT BEYOND HERE
tipprefix: 'imgtip', //tooltip ID prefixes
createtip:function($, tipid, tipinfo){
if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
)
.css(tipinfo[2] || {})
.appendTo(document.body)
}
return null
},
positiontooltip:function($, $tooltip, e){
var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$tooltip.css({left:x, top:y})
},
showbox:function($, $tooltip, e){
$tooltip.show()
this.positiontooltip($, $tooltip, e)
},
hidebox:function($, $tooltip){
$tooltip.hide()
},
init:function(targetselector){
jQuery(document).ready(function($){
var tiparray=ddimgtooltip.tiparray
var $targets=$(targetselector)
if ($targets.length==0)
return
var tipids=[]
$targets.each(function(){
var $target=$(this)
$target.attr('rel').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]"
var tipsuffix=parseInt(RegExp.$1) //get d as integer
var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it
var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
$target.mouseenter(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.showbox($, $tooltip, e)
})
$target.mouseleave(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.hidebox($, $tooltip)
})
$target.mousemove(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.positiontooltip($, $tooltip, e)
})
if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added)
$tooltip.mouseenter(function(){
ddimgtooltip.hidebox($, $(this))
})
}
})
}) //end dom ready
}
}
//ddimgtooltip.init("targetElementSelector")
ddimgtooltip.init("*[rel^=imgtip]")
I have created a page using the code below and it works fine. Is there any way that I can replicate the gallery further down the page using different images? When I try, the mouseover on the top gallery opens the images in the bottom gallery. Code: <script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("i/1-big.jpg","i/2-big.jpg","i/3-big.jpg","i/4-big.jpg")
</script>
<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}
</script>
I set up an image mouseover for the next button but its not working. I have two images set up but the second one wont appear when mousing over image. You can see it at www.college-ebook.com I would like to have an image color change when mousing over it, thus defining it as a link. What do I have to do to make this happen? Thanks.
http://www.outwarstop.com/woz/woz09r3a.php On this page located around where it says Drops under where it says "Sha-Zhul ArchDemon [60]" are the mouseover's but the location of the popup doesnt come up at the mouse, but on the left side of the table, i need help gettin the popup to appear where the mouse is located. Good morning all, I am trying to write a JavaScript that performs the following action: When I roll my mouse over on a paragraph with a Code: <p class="hover-target"> Paragraph goes here</p> It will do a reverse video of it. Currently the web page is in white background, black text. So when the mouse rolls over that particular paragraph it will be a black background, white text for that paragraph only. The JavaScript I wrote is: Code: {
Core.start
(
( function()
{
function mouseoverListener(evt)
{
evt = evt ? evt : window.event;
core.addClass (this, " over");
}
function mouseoutListener(evt)
{
evt = evt ? evt : window.event;
core.removeClass (this, " over");
}
return {
init: function()
{
var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++);
{
if (core.hasClass(allElements[i], "hover-target"))
core.addEventListener(allElements[i], 'mouseover', mouseoverListener);
core.addEventListener(allElements[i], 'mouseout', mouseoutListener);
}
}
};
}
)()
);
}
The HTML document has the right path to the scripts (core. js and the rollover.js) as well as the stylesheet (index_style.css). Also, the CSS stylesheet code is: Code: .over{
color:white;
background:black;
}
There is more to this stylesheet but I am only highlighting the rollover style. Am I missing something from my code? Thanks for your time. The following piece of codes work like this: When mouse pointer is moved over the Button, the text of the button changes; When it is moved out of the button, the background color of the button changes. <html> <head> <script type="text/javascript"> function over(e) { if(e.toElement){ if(e.toElement.tagName.toLowerCase() == "input"){ e.toElement.value="IE New"; } } } function out(event) { if (event.srcElement){ if(event.srcElement.tagName.toLowerCase() == "input"){ event.srcElement.style.background= "green"; } } } </script> </head> <body> <div id="1">aaaaaaaaaaaaaaaaaa </div> <input type="button" value="Button 1" onmouseout="out(event)" onmouseover="over(event)" /> </body> </html> This sequence works fine, until the following case: First let's see the direction of the button: (left) <--------> BUTTON <--------> (right) Now, move the mouse over to the button, from the right side of the button, both the text and the background color of the button are changed. Obviously, the mousemoveout event is also triggered. I believe in this case, only the mousemoveover event should be triggered. What caused this? Thanks Scott Hi there. I'm trying to make a little valentines website 'card' for my ladyfriend. I was going to be clever about it and use javascript, but as it turns out I'm really not that clever with it anymore. I need a single image to change into a different image on each following mouseover event. A planned 'route' of images, for exameple A -> B -> C -> D -> E -> A -> F - > B -> .. and so on. I thought I could do this, but I'm getting nowhere. I did try to look for similar attempts to make this, but it's kind of hard to find since 'mouseover' is such a generic search term. Thanks. Edit: there's little point for me in posting my code so far.. it's just a long list of imagecodes and a little mousover script that would probably make you laugh. I tried to use the CSS Horizontal List Menu from http://www.javascriptkit.com/script/...stopmenu.shtml, and it is working with the one exception of the three images not showing up. I did did save them to the directory that contains the page I pasted the scripts to, and all of the links are showing in plan test only. I placed them original in a sub-folder call graphics which is the folder I have all of the graphics in. I also place them in the root director that has all of the HTML fiiles.
I'm working at masking my fantasy football site hosted by my provider onto my own subdomain, since they can't allow me point a dns at their servers. I did manage to mask the webaddress to my sub doman with a php script. But it also only masks the initial visit, and th link name. And now i'm trying to learn how mask the various url/links in the menus. As I little about javascript, can someone show me a way to mask the url address when a user mouses over them? The links themselves wont' change, I'm just trying to mask the link names on the mouseover to look like their on my own domain. Hope that all made some sense Hey guys, I need some help. I have divs placed in a html document, and what I need to do is have a sound play when a person is to hover their mouse over the,. I used this code that I've butchered together from researching on the internet, but it just isn't working. The sound plays automatically as soon as the site loads. Can you please help me? Here is my code: Code: <html>
<head>
<script>
function EvalSound(soundobj) {
var thissound= eval("document."+soundobj);
thissound.Play();
}
</script>
<embed src="C.mp3" autostart=false width=0 height=0 name="C"
enablejavascript="true">
<embed src="D.mp3" autostart=false width=0 height=0 name="D"
enablejavascript="true">
</head>
<link rel="stylesheet" type="text/css" href="NavTest.css">
<div id=red alt="#" onMouseOver="EvalSound('C')"></div>
<div id=blue alt="#" onMouseOver="EvalSound('D')"></div>
</html>
Thank you! [: Sorry, maybe I should also mention that my knowledge of Javascript is NONE! :| I am a Javascript novice so please bear with me here. I made a multi level menu at http://x7.ro/proiect/produse.html -first left menu item:Raticide- by using Javascript and css. What this should do is show the sub-menu on mouseover and hide it on mouseout WITH a custom delay so people have a chance to click menu items. This seems to work except for the all needed delay. I was trying to use javascript setTimeout function but I cannot seem to make it work. Think this should be easy for a pro and Id remain indebted if any of you could help. Thanks a lot. Below is the working code:JS and Html. Code: <SCRIPT type=text/javascript>
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
function hideElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="block"){
myLayer.style.display="none";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="block";
}
}
</SCRIPT>
Code: <A class=button onMouseOver="javascript:showElement('v-menu');return false;" onMouseOut="javascript:hideElement('v-menu');return false;" href="#"><SPAN>Raticide</SPAN></A>
<UL style="DISPLAY: none" id=v-menu class=v-menu>
<LI><A href="aaa.html">PRODIORAT</A></LI>
<LI><A href="aaa.html"> PROBRODIRAT</A></LI></UL>
Hello everyone. I hope to stay well in this forum, but for now there are all the cards on the table to happen. I write primarily driven by a need: Starting from this script: Link I would like to integrate a system of hidden text in the four hill icons when the mouse over one of these and, above all, to enter as there is in the photo galleries <> that allows me to have a new set of icons. I trust in you. Thanks in advance, I hope to stay well! Works in Firefox, chrome, even my phone, but not IE Code: <a onmouseover="document.getElementById('statusbox').innerHTML='<table width=100%><tr><th colspan=3>Carrot statuses</th></tr><tr><th>Status</th><th>Magnitude</th><th>Duration</th></tr><tr class=alt><td>DamageResistDebuff</td><td>5</td><td>2</td></tr><tr class=alt><td>DamageResistDebuff</td><td>5</td><td>2</td></tr><tr class=alt><td>Repeatattack</td><td>5</td><td>1</td></tr><tr class=alt><td>Defense</td><td>10</td><td>2</td></tr><tr class=alt><td>Regen</td><td>7</td><td>4</td></tr></table>'; document.getElementById('statusbox').style.opacity = 100; document.getElementById('statusbox').style.display = 'inline'; document.getElementById('statusbox').style.backgroundColor = 'beige'; document.getElementById('statusbox').style.zIndex = 10; document.getElementById('statusbox').style.filter = 'alpha(opacity=1.0)'" onmousedown="postXMLDoc('/ajaxget?battlerel="nofollow" target=10634','view='+10634)">
Any ideas? Hi guys...I am new to javascript.....I need help with my code below.I need to change it to " the font size of a paragraph should only be changed if the "Magnified" button is selected AND the mouse cursor is over a paragraph. When the mouse moves over a paragraph, increase the font size by a factor of 3. When it is no longer over the paragraph, reduce the font back to its original size" HELP and thanks.... <html> <head> <title>Assignment 4</title> </head> <body> <p> <script launguage="javascript"> var fontSize = 1; function zoomIn() { fontSize += 0.1; document.body.style.fontSize = fontSize + "em"; } function zoomOut() { fontSize -= 0.1; document.body.style.fontSize = fontSize + "em"; } </script> </p> <h2>Joseph’s text zoom and radio buttons</h2> <p>Click on below buttons and see the text getting zoomed in and out..!!</p> <input type="radio" name="radio" value="fontSize -" onclick = "zoomOut()"/> <label for="original">Standard</label> <br><br> <input type="radio" name="radio" value="fontSize -" onclick = "zoomIn()"/> <label for="zoomed">Magnified</label> </body> </html> I have a few java events attached to a couple rollover buttons. They seem to all work just great on every browser but ie8 for some reason. Code: <script type="text/javascript"src="lookbook_web/mouseovers.js">
<div id="thumb_container">
<div id="thumb1"><a href="javascript:void()"onmouseover="ShowPage('fra me1')"onclick="ShowPage('frame1')" rel="nofollow" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a href="javascript:void()"onmouseover="ShowPage('fra me2')"onclick="ShowPage('frame2')" rel="nofollow" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a href="javascript:void()"onmouseover="ShowPage('fra me3')"onclick="ShowPage('frame3')" rel="nofollow" rel="nofollow" target="mainbox"></a></div>
And then the mouseovers.js file looks like this (this is just a script i found online and edited so my guess is that the issue is here): Code: function ShowPage(frame1)
//Display in the i-frame, the page whose name is aName
{
{
frames[0].location = frame1+'.html'
}
function ShowPage(frame2)
//Display in the i-frame, the page whose name is aName
{
frames[0].location = frame2+'.html'
}
function ShowPage(frame3)
//Display in the i-frame, the page whose name is aName
{
frames[0].location = frame3+'.html'
}
}
Like i said, works on ffox, safari, ie7, chrome.. so im sort of at a loss. Ideas? hi there, i am a novice at this and have copied and pasted code to try and acheive what i need but am having trouble. I have two functions, one to show random ads but the second is to show the "ads" in a larger image in a different place when mouseover. Although this code works i now want to adapt it to show a slightly different picture. Here is the code i am using and a presume the problem lies with the showIt(this.src) as i dont want it to show the same picture. Any help would be great. Thank you here is the script i am using <head> <script type="text/javascript" src="??????????.js"></script> <script type="text/javascript"> function showIt(imgsrc) { var holder = document.getElementById('imageshow'); var newpic= new Image(); newpic.src=imgsrc; holder.src=imgsrc; holder.width =300; holder.height=300; } </script> </head> and here is the main body code <a href="http://www.???????.com/" rel="nofollow" target="_blank"><img src="???????.jpg" width="100" height="100" border="1" onmouseover="showIt(this.src)"></a>' Hi everyone. I'm new to the forum, and in need of help. The code below sometimes works the way I want it to...by downloading a video from an external site and displaying a placeholder whenever the page loads. But most of the time, the video won't download and display until a user hovers their mouse over the blank area. Is it possible to modify the code so that it functions consistently by always downloading and displaying the placeholder when the page loads? I don't want users to think there's a missing/broken video because there's a blank space where the video is supposed to be, and they don't realize they have to mouse over it. I would be grateful for any pointers. I searched the forums for a solution, but I don't think I'm using the correct keywords. Thanks so much for your help. Code: <a href="#" onclick="return(false);" rel="videoGUID=4cd75af679b39g4963V828c00c581024ae86&" style="display: block; width: 550px; height: 310px" id="4cd75af679b39g4963V828c00c581024ae86" width="550" height="310">How to Take Care of Your Dog's Teeth: VetVid Episode 001</a><script type="text/javascript" src="http://360.sorensonmedia.com/4cd75af679b39g4963V828c00c581024ae86/embedv2.js"></script> Ok, I'm working in dreamweaver cs4 I'm trying to make my links have a sound on mouseover. The tag for this is under the depreciated behaviour section. I tried it to test it. It added the following code to my link: Code: To View Full Product Line<br />
<a href="http://herbal-nutrition.net/yesifeelgood/products" target="_blank" onmouseover="MM_controlSound('play','document.test','sounds/Sound 378.mp3')">Click Here</a>
<embed name="test" src="sounds/Sound 378.mp3" loop="false" autostart="false" hidden="true" width="0" height="0" enablejavascript="true"></embed>
My only problem is that when this loads in a browser on mouseover it loads the window as a quicktime sound then directs to the link preview on the following link (the link where I added the sound is underneath the slideshow: http://www.designfoxmediaworks.com/c...e/carlene.html is there something i should be changing to make this work properly? |
|||||||