|
JavaScript - Change On Mouseover, Click To Hyperlink
Hello
I'm a beginner when it comes to javascript. I found a nice script that did what I wanted, which was have 3 "buttons" that on hover change a different image to the side of them. However, I also would like the button that if clicked to go to a section of the website - so an internal link. I was slightly confused when reading that to have a link in javascript isn't good practice. How could I achieve this? I would really appreciate any help, thank you below is the code Code: <script language="JavaScript" type="text/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 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_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>
</head>
<body bgcolor="FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('information-white-alt.png','training-quote.png','training-white-alt.png','consultancy-quote.png','information-white-alt.png','information-quote.png')">
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="javascript:;" onMouseOver="MM_swapImage('b1up','','information-white-alt.png','biganchor','','information-quote.png',1)" onMouseOut="MM_swapImgRestore()"><img src="information-white.png" name="b1up" width="270" height="74" border="0" id="b1up"></a></td>
<td rowspan="3"><div align="center"><img src="home-statement.png" name="biganchor" width="500" height="222" id="biganchor"></div></td>
</tr>
<tr>
<td><a href="javascript:;" onMouseOver="MM_swapImage('biganchor','','training-quote.png','b2up','','training-white-alt.png',1)" onMouseOut="MM_swapImgRestore()"><img src="training-white.png" name="b2up" width="270" height="74" border="0" id="b2up"></a></td>
</tr>
<tr>
<td><a href="javascript:;" onMouseOver="MM_swapImage('biganchor','','consultancy-quote.png','b3up','','information-white-alt.png',1)" onMouseOut="MM_swapImgRestore()"><img src="information-white.png" name="b3up" width="270" height="74" border="0" id="b3up"></a></td>
</tr>
</table>
Similar TutorialsI need to simulate a mouseclick on a hyperlink with a function. Any idea if this is possible ? I got this javascript Click sound effect to work - http://www.javascriptkit.com/script/...oundlink.shtml My question is how do I make it work on my iphone4 ? I tested the above site on my phone and there is no audio when I tap the screen. The html5 <audio> seems to work with my mobile device on this site - http://css-tricks.com/examples/SoundOnHover/ I am new to javascript thx Hi people ! I went to this page: http://www.javascriptkit.com/script/....shtml#current and I applied that script to my website, everything work perfectly. I only have a question about it: * What should I add to the code to avoid the sound activate even when I'm hovering over the margin of the image? * Would it be possible that the sound activate only when the mouse is hovered over the image and not the margin as well ? * Is the only solution; to insert every image in their own div and then letting the div handle the margin? this is the site www.blackbandanamovement.com the images I'm talking about are in the footer. thanks in advance I have a map with hotspots, and when you hover over a hot spot, a hidden DIV appears. Thanks to my favorite coding forum, this one, I was able to successfully accomplish this first bit of code. The only problem I'm having now is getting the DIV to remain open while I move my mouse from the hotspot to the DIV. As soon as I move my mouse away from the hotspot, the DIV disappears. I need to put links in the DIVs, and users will need to be able to move their mouse away from the hotspot to click on the link, but currently can't. I experimented with setTimeout, but didn't get too far. If anyone could help me, I'd appreciate it. I really need to get this working. Code: <img src="images/map.png" alt="" usemap="#map"/> <map id="map" name="map"> <area shape="rect" coords="211,84,225,97" href="#" alt=""/> <area shape="rect" coords="226,78,240,92" href="#" alt=""/> <area shape="rect" coords="353,66,376,89" href="#" alt=""/> </map> <div id="hidden"> <div class="location" style="left:25px; top:-290px;"> <img src="images/location01.jpg" alt=""/> </div> <div class="location" style="left:25px; top:-275px;"> <img src="images/location02.jpg" alt=""/> </div> <div class="location" style="left:275px; top:-285px;"> <img src="images/location03.jpg" alt=""/> </div> </div> <!-- #hidden --> Code: function show(which) {
var area = document.getElementById("map").getElementsByTagName("area");
var locations = document.getElementById("hidden").getElementsByTagName("div");
for (var a=0; a < area.length; ++a) {
if(area[a] == which) locations[a].style.display="block";
}
}
function hide() {
var locations = document.getElementById("hidden").getElementsByTagName("div");
for (var d=0; d < locations.length; ++d) {
locations[d].style.display="none";
}
}
function init() {
var area = document.getElementById("map").getElementsByTagName("area");
for (var a=0; a < area.length; ++a) {
area[a].onmouseover = function() { show(this); }
area[a].onmouseout = hide;
}
}
window.onload = init;
Hi all, I am using the following script posted on this site: http://www.javascriptkit.com/script/...oundlink.shtml It works great, but I want to extend this script and mute the sound using a checkbox. This checkbox has the id: sound. If checked, I want to hear the sounds, when unchecked, no sounds should be heard. This is the code I currently have for the checkbox: Code: function playSound() {
if (document.getElementById('sound').checked){
-something needs to be added here to make it work?-
}
}
Anyone have an idea how to make this work? Many thanks Hello, and thanks for any help. I'm developing a site to include a map of schools (http://www.fcsoablues.net/map.asp). I'm creating hotspot links to googlemaps for each school (in a new browser window). I've got that much working okay. My problem is, I'd like to include popups for each hotspot that, on mouseover, show the name of the school. The popup should close on mouseoff. Without this, users only see the map full of school icons, and it's difficult to know which school is which. Ideally, the popup should follow the cursor (not a must, though). I've included the BODY of the code I'm using below. Code: <body> <img src="/FCSOA_IMAGES/Foothill-Citrus area map.jpg" width="1600" height="826" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="1169,166,1196,194" href="http://maps.google.com/maps?rlz=1C1AVSX_enUS420US420&um=1&ie=UTF-8&q=alta+loma+high+school&fb=1&gl=us&hq=alta+loma+high+school&hnear=0x80c32def799fa121:0x5209947000caa933,Pomona,+CA&ei=6x40T_WtDMaU2AXbtPnzAQ&sa=X&oi=local_group&ct=image&ved=0CAgQtgM&iwloc=cids:11113758998891877583" target="_new" alt="Alta Loma High School" /> <area shape="rect" coords="776,299,803,324" href="http://maps.google.com/maps?rlz=1C1AVSX_enUS420US420&um=1&ie=UTF-8&q=claremont+high+school&fb=1&gl=us&hq=claremont+high+school&hnear=claremont+high+school&cid=0,0,7887364383841814220&ei=Mh80T-LLBanm2QX4s72RAg&sa=X&oi=local_result&ct=image&ved=0CA8Q_BI" target="_new" alt="Claremont High School" /> <area shape="rect" coords="523,262,548,289" href="http://maps.google.com/maps?rlz=1C1AVSX_enUS420US420&um=1&ie=UTF-8&q=San+Dimas+High+School&fb=1&gl=us&hq=San+Dimas+High+School&hnear=San+Dimas+High+School&cid=0,0,9099100455580750144&ei=Wx80T7X9D6O-2gXU9YGeAg&sa=X&oi=local_result&ct=image&ved=0CA8Q_BI" target="_new" alt="San Dimas High School" /> </map> </body> Hello, I'm trying to put a site together and this time I'm going for an interactive feel. Code: <p id="status">[Closed]</p> Thats the html of it. What i'm trying to accomplish is when the mouse goes onto the <p>, the [Closed] then turns into Code: <a href="index.php">Open</a> but I can't get this figured. Could someone help me? Thnx! I am quite new to JavaScript code and have a challenge. I would like to add a mouseover script to several different images e.g. Manufacturer logos which would cause a background image to change accordingly. There are eight different logos which would refer to eight background images respectively. I have found several scripts which cause the image which has the mouseover to change but not any which cause a different image to change. Is this practical using JavaScript? Any help is greatly appreciated!
Im new to this forum and was wondering if anyone would mind helping me out. Im attempting to modify some code i found here through google to be used to change a welcome screen to 4 different languages besides english. heres the code <code> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .hide { display:none; } .show { display:inline; } </style> <script type="text/javascript"> if(window.addEventListener){ window.addEventListener('load',showlinks,false); } else { if(window.attachEvent){ window.attachEvent('onload',showlinks); } } function showlinks() { lis=document.getElementById('nav').getElementsByTagName('li'); for(c=0;c<lis.length;c++){ lis[c].onmouseover=function() { this.getElementsByTagName('span')[0].className='hide'; this.getElementsByTagName('span')[1].className='show'; } lis[c].onmouseout=function() { this.getElementsByTagName('span')[0].className='show'; this.getElementsByTagName('span')[1].className='hide'; } } } </script> </head> <body> <ul id="nav"> <li> <span>[Closed]</span> <span class="hide"><a href="http://www.codingforums.com/">codingforums.com</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://www.google.com/">google.com</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://www.bbc.co.uk/">bbc.co.uk</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://w3c.org/">w3c.org</a></span> </li> </ul> </body> </html> </code> As far as i can tell, if i just add the correct number of span id's it should work, or is there a different code i must plug in to get it to switch to the different languages. I'm not completely sure this is javascript, but is there a way of changing the z-index of my flash object when hovering over it? Here is a link to my page: http://aspspider.org/Samii/HireCar.aspx As you can see, you cannot click on the link in the main content area because the menu is on a higher z-index than the content. I need a way for the content to be on a higher z-index than the menu until the menu is hovered over, in which case the z-index of the menu will be higher. I hope this makes sense. Please help, this is driving me insane! Samii x Hi, I want to make a piece of text fade from black to white while someone puts their mouse over it and change it back to black when they move their mouse away. I did it with the following code, but I'm wondering if anyone would do some (or all) of it a different way. Thanks! Code: //convert RGB values to hexidecimal
function RGBtoHex(color) {
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
var R = parseInt(digits[2]);
var G = parseInt(digits[3]);
var B = parseInt(digits[4]);
Hex = new Array(R, G, B);
return Hex;
}
// Start the text fading
function FadeStart(id, FadeTo) {
Element = document.getElementById(id);
OriginalColor = getComputedStyle(Element, null).color;
Start = RGBtoHex(FadeTo);
rgb = RGBtoHex(OriginalColor);
red = (Start[0] - rgb[0])/16;
green = (Start[1] - rgb[1])/16;
blue = (Start[2] - rgb[2])/16;
BeginFading = true;
Fade();
}
//Actually do the fading
function Fade() {
var Complete = (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]);
if (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]) {
rgb[0] += red;
rgb[1] += green;
rgb[2] += blue;
var ChangeColor = "rgb(" + Math.round(rgb[0]) + ", " + Math.round(rgb[1]) + ", " + Math.round(rgb[2]) + ")";
Element.style.color = ChangeColor;
time = setTimeout("Fade()", 500);
}
}
//Return text to original color
function FadeStop() {
BeginFading = false;
clearTimeout(time);
if (Element != null) Element.style.color = OriginalColor;
}
Hi this is my first thread here and I am a beginner programmer Java/HTML/CSS only. I used google to add an interactive feature to my website that some people may be familiar with. I wanted to make an image that changes into another image when you mouse over it. Maybe there is a problem with how I integrated it into the rest of my webpage code. I am using angelfire to build my website and am a little disappointed that they don't have their own forum but this one looks really good. Following is my code that can be examined and possibly corrected. Code: <html>
<head>
<style type="text/css">
body {background-color:gold;}
table
{
width:70%;
}
th
{
height:100px;
}
</style>
<script language="JavaScript">
<!-- Hide the script from old browsers --
img0_on = new Image(400,400);
img0_on.src="images/the-power-of-the-cross.JPG";
img0_off = new Image(400,400);
img0_off.src="images/006.JPG";
function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
// --End Hiding Here -->
</script>
<TITLE>Welcome to the Christ Alive Community Church Website</TITLE>
</head>
<body>
<a href="http://www.angelfire.com/caccweb/index2.html" onmouseover="over_image('img0');" onmouseout="off_image('img0')"> <img src="images/006.JPG" border="0" name="img0"> </a>
<TABLE>
<TR>
<TD>
<img src="images/006.JPG" WIDTH="400" HEIGHT="400">
</TD>
<TD>
<img src="images/043.JPG" WIDTH="400" HEIGHT="400">
</TD>
</TR>
</TABLE>
</body>
</html>
I am new to JavaScript and I am having a difficult time finding what I thought would be easy to find (so please forgive me if this has been posted somewhere else...) I have 4 text strings that when a user runs his/her mouseOver, I'd like to display a corresponding picture in a display area. I thought that would be easy enough. However, it gets a bit complicated for me since I am also using CSS to position the display area. For some reason all I can find out there are examples using HTML tables for display image positioning. I don't want to use tables. I'm not sure if this will make a difference but my style sheet is external. Also, the text does not link/go to another page. I REALLY hope that made sense. Someone please help me! I'm in the middle of teaching myself PHP and SQL so I'm only at the paste-and-tweak level with Javascript. Bear with my newbie-ness. I've seen a few solutions for creating a form dropdown menu that changes a nearby image based on what is selected. I want exactly that, but is it possible to have the images also appear on mouseover? I found a menu solution using CSS, but when I applied it to a form, it didn't work. Can anyone put me in the right direction on how to do that? I've started with this code, but need to tweak it to do this if possible: Code:
<html>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><select name="selectbox" size="1" onChange="changecontent(this)">
<option selected value="What is JavaScript?">What is JavaScript?</option>
<option value="Why learn JavaScript?">Why learn JavaScript?</option>
<option value="The difference between JavaScript and Java">The difference between Java and JavaScript</option>
<option value="What is DHTML?">What is DHTML?</option>
</select><br>
</td>
</tr>
<tr>
<td width="100%"><div id="output"></div><br>
<font face="arial" size="-2">This free script provided by <a href="http://javascriptkit.com">JavaScript Kit</a></font>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<p>
<script language="JavaScript">
/*
Drop down messages script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/
//change contents of message box, where the first one corresponds with the first drop down box, second with second box etc
var thecontents=new Array()
thecontents[0]='JavaScript is a scripting language developed by Netscape to add interactivity and power to web documents. Examples of JavaScript include live clocks, rollover effects,<br> <img src="http://www.google.com.au/intl/en_au/images/logo.gif"></img>'
thecontents[1]='The first word that comes to mind is: "Freedom baby, freedom!" With html, you are restricted to creating static, non interactive webpages. This, in today\'s internet standards, etc etc 1'
thecontents[2]='Java is completely different from JavaScript-It\'s a lot more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, etc. etc. 2'
thecontents[3]='DHTML, or Dynamic HTML, is a new web technology that enables elements inside your web page to be, well, dynamic. Things once considered unchangeable etc. etc 3'
//don't edit pass this line
function changecontent(which){
document.getElementById('output').innerHTML=thecontents[which.selectedIndex]
}
document.getElementById('output').innerHTML=thecontents[document.ddmessage.selectbox.selectedIndex]
</script>
</body>
</html>
Hi, Am trying to change both, the background color and the mouse pointer to hand on the mouseover event. Am using this to change the background color: Code: onMouseover="this.bgColor='#55FF55'"onMouseout="this.bgColor='#AEFFAE'" How and i add the "change pointer to hand" on this as well? Thanks Hey guys, so i have a small problem. I have a comment area on my site. And i have the comments set to a specific height, so it only shows so much text. And i have a "read more ..." button How would i make it so that when I click the read more button. The CSS for the comment div changes to height:auto; This is what i currently have, and its not working. CSS Code: .tag_desc { clear:both; height:30px; overflow:hidden; }
HTML Code: <div class="tag_read_more"><a onclick="document.getElementsByClassName('tag_desc').style.height = 'auto';">Read more ...</a></div>
Thanks in advance !! Hello I need script that change link after first click for example: <a href=URL1 target=_blank><img src=....></img></a> After click on this image , URL1 changes to URL2 and visitor when click on it again and again , it goes to URL2 Regards I wrote a function, to change a input value to show a key, which PHP later recognizes and makes addition changes too. However I can't seem to get this simple function to work, can you see anything wrong with it? Code: function quote(id) {
var shout = document.getElementById('shout');
var currentShout = '; '.shout.value;
var prefix = '@'.id;
shout.value = prefix.currentShout;
}
I call it by Code: <a href="#" onclick="javascript: quote('2');">Comment</a>
the input that changes is written as Code: <input id="shout" name="shout" type="text" onKeyPress="return submitenter(this,event);"> Hi im using this to hide and show some text, how do i do to change the text "Show" to hide when i click it and back to "Show" when click it again. Code: <script type="text/javascript">
$(document).ready(function(){
$('.accordion-content').hide();
//toggle the componenet with class accordion
$('.accordion-toggle').click(function(){
//$(this).toggleClass('toggle-accordion-active');
$(this).next('.accordion-content').slideToggle(300);
});
$('#accordion-expand-all').click(function(){
$('.accordion-content').slideToggle(300);
});
});
</script>
Code: <p><a id="accordion-expand-all" href="#">Show</a></p> |
|||||||