|
JavaScript - Mouseover On Toggling Image Button
Hi,
I have this button: Code: <input type="image" src="pause.png" onmouseover="src='pauseon.png'" onmouseout="src='pause.png'" onclick="togglePause()" id="pauseBtn"/> which changes from the play image to the pause image when clicked, using this function: Code: function togglePause(){
if (paused){
paused=false;
document.getElementById('pauseBtn').src="pause.png";
setTimeout("animate("+(continueStep)+")", tick);
} else {
paused=true;
document.getElementById('pauseBtn').src="play.png";
}
}
but it doesn't really work how I want it to - first off, I can't get the same mouseover and mouseout effect working for when the button is on the "play" image secondly, the button reverts to the pause image regardless of if it is in play or pause state. I'm kind of lost - can someone throw me a line? the page I'm working on is here if you want to have a look Similar TutorialsHi, I have two excellent pieces of code (thanks Old Pedant and jmrker) that I am trying to get to talk to each other. Basically I want to achieve the same button effect as here but with a group of buttons that get produced from xml via innerhtml. here's the code I'm using to create the buttons: Code: sidebar_html += '<div id="category"><input type="checkbox" id="'+category+'" onclick="boxclick(this,\''+category+'\',\''+poly_num+'\');"></div><div id="label">' + label + '</div><div id="bus"><button onclick="startCar(this,' + poly_num + ')" style="height:24px; width:30px"> <img id=this,"pauseBtn" src="play2.png" ></button></div><br>'; and here's the code that attempts to toggle them between the play and pause symbol: Code: function startCar(btn,pnum,poly_num){
if (this.wasRun)
{
btnAction();
} else {
if( !this.wasRun )
toggleRun(btn, pnum);
btnAction();
this.wasRun = true;
}
}
function toggleRun(btn, pnum){
var inps = document.getElementsByTagName("input");
for ( var i = 0; i < inps.length; ++i ) {
var inp = inps[i];
if ( inp.value = "play2.png" ) inp.value = "pause2.png";
}
startAnimation(pnum);
}
function btnAction() {
var currentBtn = document.getElementById('pauseBtn').src;
var currentPath = currentBtn.substring(0,currentBtn.lastIndexOf('/'));
var currentInfo = currentBtn.substring(currentBtn.lastIndexOf('/')+1);
if (paused == true){
paused=false;
if (currentInfo == "play2.png") { currentInfo = 'pause2.png'; }
document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
setTimeout("animate("+(continueStep)+")", tick);
} else {
paused=true;
if (currentInfo == "pause2.png") { currentInfo = 'play2.png'; }
document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
}
}
The page I'm working on is here Everything works as it should except for the toggling between images. 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've been looking for a solution to a dropdown menu problem where the button does not stay hovered when the list is navigated/as soon as the cursor leaves the button area. At the moment the effect is setup using css sprites (locally) but I have seperate images also for the 2 states. HTML Code: <dl class="dropdown">
<dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)"><div id="mainnav1"></div></dt>
<dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
<ul><li>
<a href="page1.html" class="underline">Products 1</a>
<a href="page2.html" class="underline">Products 2</a>
<a href="page3.html" class="underline">Products 3</a>
<a href="page4.html" class="underline">Products 4</a>
<a href="page5.html" class="underline">Products 5</a>
<a href="page6.html" class="underline">Products 6</a>
<a href="page7.html">Products 7</a>
</li></ul></dd></dl>
CSS Code: #mainnav1 {width:218px; height:50px; background:url(../images/root/mainnav1.png)} #mainnav1:hover {background-position:0 -50px;} #mainnav1 a:active {background-position:0 -50px;}
#mainnav2 {width:218px; height:50px; background:url(../images/root/mainnav2.png)} #mainnav2:hover {background-position:0 -50px;} #mainnav2 a:active {background-position:0 -50px;}
#mainnav3 {width:218px; height:50px; background:url(../images/root/mainnav3.png)} #mainnav3:hover {background-position:0 -50px;} #mainnav3 a:active {background-position:0 -50px;}
#mainnav4 {width:218px; height:50px; background:url(../images/root/mainnav4.png)} #mainnav4:hover {background-position:0 -50px;} #mainnav4 a:active {background-position:0 -50px;}
.dropdown {float:left;}
.dropdown dt {width:218px; height:50px; overflow:hidden;}
.dropdown dt:hover {background-position:0 -50px;}
.dropdown dd {position:absolute; overflow:hidden; width:218px; display:none; z-index:200;}
.dropdown ul {width:218px;}
.dropdown li {display:inline;}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#747474; text-decoration:none; background:#efefef; width:218px;}
.dropdown a:hover {background:#757575; color:#dddddd;}
.dropdown .underline {border-bottom:1px solid #d9d9d9;}
JS Code: var DDSPEED = 1;
var DDTIMER = 1;
// Mouse Events //
function ddMenu(id, d) {
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if (d == 1) {
clearTimeout(h.timer);
if (c.maxh && c.maxh <= c.offsetHeight) {
return
} else if (!c.maxh) {
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function () {
ddSlide(c, 1)
}, DDTIMER);
} else {
h.timer = setTimeout(function () {
ddCollapse(c)
}, 0);
}
}
// Collapse //
function ddCollapse(c) {
c.timer = setInterval(function () {
ddSlide(c, -1)
}, DDTIMER);
}
// Cancel Collapse During Dropdown Selection //
function cancelHide(id) {
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if (c.offsetHeight < c.maxh) {
c.timer = setInterval(function () {
ddSlide(c, 1)
}, DDTIMER);
}
}
// Expand & Contract //
function ddSlide(c, d) {
var currh = c.offsetHeight;
var dist;
if (d == 1) {
dist = (Math.round((c.maxh - currh) / DDSPEED));
} else {
dist = (Math.round(currh / DDSPEED));
}
if (dist <= 1 && d == 1) {
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
if ((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)) {
clearInterval(c.timer);
}
}
I heard that it's something to do with the mouseover function but feel like I could be adding css and not changing some of the stuff already present governing the script, can anyone guide me? Thanks! Hey folks, I'm really wanting to mess around with doing something like the button at the bottom of this web page: http://www.major-confusion.co.uk/tut...sh-button.html The button has a short looping animation that plays when the button is moused over. It could create a very cool effect. Any JS gurus know if this or something similar can be done using JS and/or html5? I'm trying to avoid using flash at all costs. Thanks in advance. Greetings, Does anyone know the code to create a function and form to make the position of a button change dynamically based on a mouseover event please? Whereby a viewer's cursor will chase the button around an IE page for infinity! I would prefer to do this without the need for any plugins if at all possible, and it does not need to be cross-platform, just IE is fine. Many thanks I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you. Javascript Code: <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>
HTML THUMBNAIL Code: <div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div> HTML LARGER IMAGE Code: <div><img src="" id="BigOne"></div> Hi, I have a good toggle script that does what I want for the most part. I have a set of links. When you click one the content in that div replaces the previous content. When you load the page, the content of link one shows. However, I would like to have different content show, not related to any of the links, when the page first loads. Once you click on any of the links that copy will get replaced with the corresponding copy. I am attaching the code and a link to the page. Code: <!-- Hide/Show -->
<script type="text/javascript">
window.onload=function() {
var aObj=document.getElementsByTagName('a');
var i=aObj.length;
while(i--) {
aObj[i].count = i;
aObj[i].onclick=function() {return showHide(this);};
showHide(aObj[i]);
}
};
function showHide(obj) {
var aDiv=document.getElementById('wrapper').getElementsByTagName('div');
if (typeof showHide.counter == 'undefined' ) {
showHide.counter = 0;
}
aDiv[showHide.counter].style.display = 'none';
aDiv[obj.count].style.display = 'block';
showHide.counter = obj.count;
return false;
}
</script>
http://www.michelleswann.com/test/index.html Thanks so much for any help! I have a table with red and green cells...what I want to do is collapse rows with ALL green cells and show every other... My code right now runs into a problem when there are both red and green cells in a row...It shifts the red cells to the left... Code: <html>
<head>
<style type="text/css">
.green{ background:green;display:none;}
.red{ background:red;}
</style>
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("toggleMe").style.display = "";
if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
document.getElementById("toggleMe").style.visibility = "visible";
}
else {
document.getElementById("toggleMe").style.visibility = "hidden";
}
}
</script>
</head>
<body>
<table id='theTable' border=2>
<tr>
<th>col0</th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
</tr>
<tr>
<td><a href="#" id="showgreen">Uncollapse</a></td>
<td class="green">1</td>
<td class="green">9</td>
<td class="green">20</td>
<td class="red">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr id="toggleMe">
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="green">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
</table>
<a href="#" id="showred">Toggle Errors</a>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$("#showgreen").click(function(){
$('.green').toggle();
});
$("#showred").click(function(){
$('.red').toggle();
});
</script>
<p><button onclick="toggleVisibility()">toggle</button></p>
</body>
</html>
How can i preserve the cell position as well? 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.
Putting some javascript into a pdf file and can't get this to work out right. Basic setup: Field X = checkbox; Field Y = numeric input field; Here's what should happen (increment is toggled): Y has a value. When X is checked, Y is increased by 5. When X is unchecked, Y goes back to its original, unmodified value. Here's what really happens (increment is subtracted): Y has a value. When X is checked, Y is reduced by 5. When X is unchecked, Y is reduced by 5 again. Anytime X is clicked on, Y is reduced by 5 yet again. Here's the code: Code: function check_box(X, Y){
if(X.checked == true){
Y.value += 5;
} else {
Y.value -= 5;
}
Any help or advice is greatly appreciated. I don't know if this is the right thread or not but my question is if anyone can tell what the script might be for doing this mouseover. zOr how it can be done. http://www.newtonaptclinics.com/ConditionsTreated.html Thanks Bill 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!
Hello folks, I'm new here. This is just a question regarding a script I'm after that enlarges an image onmouseover and shrinks the other two images. It is probably best I explain this by using drawings. As you can see, in figure 1, I have a line of three images connected in boxes (although shape will probably change to something more complex later) (Figure 1) Then in figure 2, when the user rolls the mouse over the middle image, it enlarges, and the other two shrink, whilst still remaining very much side by side/in the same position. (Figure 2) The same action would apply when the user rolls their mouse over any of the three images, I'm just using the middle purely as an example! Is there any way to do this or script I can use? My javascripting skills aren't brilliant! Cheers. Hi, I have a problem when my mouse point to specific element on image, my image is gone. It happened on IE 8. When I tried on Firefox, Safari and other browser, it is working ok. Could you guy help me to find out what went wrong? See bellow for the code. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://plutoville.staging.elevatedrails.com/javascripts/prototype.js" type="text/javascript"></script>
</head>
<body>
<div>
<div><img alt="World" id="question_image" src="http://plutoville.staging.elevatedrails.com/question_images/0000/1278/World.gif" usemap="#question_map" /></div>
<map id="question_map" name="question_map"><area shape="rect" alt="Indonesia" title="Indonesia" coords="262,104,364,127" onmouseout="mouseOutOfShape(0);" onmouseover="mouseOverShape(0);" onclick="clickShape(0);" href="javascript:registerClick();" rel="nofollow" target="_self" /><area shape="rect" alt="Canada" title="Canada" coords="36,15,99,44" onmouseout="mouseOutOfShape(1);" onmouseover="mouseOverShape(1);" onclick="clickShape(1);" href="javascript:registerClick();" rel="nofollow" target="_self" /></map>
</div>
<script src="http://plutoville.staging.elevatedrails.com/javascripts/drawing.js" type="text/javascript"></script>
<!--[if gte IE 8]>
<script src="http://plutoville.staging.elevatedrails.com/javascripts/excanvas.js" type="text/javascript"></script>
<![endif]-->
<script type="text/javascript">
question_image_1 = $('question_image');
shapes = new Array();
border_shapes = new Array();
selected_shape_index = null;
border_style = {stroke:"rgb(255,128,0)", fill:"rgba(255,128,0,0.0)"};
neutral_style = {stroke:"rgb(255,128,0)", fill:"rgba(255,128,0,0.2)"};
shapes.push(new StyledShape(neutral_style, new Rectangle(262,104,364,127)));
border_shapes.push(new StyledShape(border_style, new Rectangle(262,104,364,127)));
shapes.push(new StyledShape(neutral_style, new Rectangle(36,15,99,44)));
border_shapes.push(new StyledShape(border_style, new Rectangle(36,15,99,44)));
draw = function() {
question_image_1.onload = function() {
if(!this.complete) {return;}
drawing_context = drawingContextOfImage(this);
drawBorders(drawing_context);
}
question_image_1.onload();
}
clickShape = function(index) {
selected_shape_index = index;
$('answer_map_area_index').value = index;
drawing_context = drawingContextOfImage(question_image_1);
drawBorders(drawing_context);
}
drawBorders = function(drawing_context) {
border_shapes.each(function(shape, index) {
shape.draw(drawing_context)
});
if(selected_shape_index != null) {
shapes[selected_shape_index].draw(drawing_context);
}
}
mouseOverShape = function(index) {
drawing_context = drawingContextOfImage(question_image_1);
drawBorders(drawing_context);
if(selected_shape_index != index) {
shapes[index].draw(drawing_context);
}
}
mouseOutOfShape = function(index) {
drawing_context = drawingContextOfImage(question_image_1);
drawBorders(drawing_context);
}
draw();
</script>
</body>
</html>
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>' Hello everyone. I am trying to add the functionality of having a mouseover popup image with multiple different popup images. I have found the code seen below and altered it for my uses and was hoping to find out if someone can tell me why I am seeing the same image with each mouseover. Thanks. <script type="text/javascript"> function ShowPopup(hoveritem) { hp = document.getElementById("hoverpopup"); // Set position of hover-over popup hp.style.top = hoveritem.offsetTop + 18; hp.style.left = hoveritem.offsetLeft + 20; // Set popup to visible hp.style.visibility = "Visible"; } function HidePopup() { hp = document.getElementById("hoverpopup"); hp.style.visibility = "Hidden"; } </script> <table> <tbody> <tr> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867796.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851557.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867803.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851637.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867802.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851627.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867799.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851597.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867797.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851567.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867798.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851577.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867800.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851607.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867801.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851617.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867804.jpg" /></a></td> </tr> </tbody> </table> <table width="270" cellspacing="1" cellpadding="1" border="0"> <tbody> <tr> <td><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856598.jpg');"><img width="96" height="100" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856097.jpg" /></a></td> <td style="text-align: center;"><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856227.jpg');"><img width="65" height="100" border="0" align="middle" src="http://entrixsports.com//ir/oi/1000954/1856098.jpg" alt="" /></a></td> <td style="text-align: right;"><a href="http://entrixsports.com/linkTo/1304219/1000954" rel="nofollow" target="_blank"><img width="60" height="102" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856099.JPG" /></a></td> </tr> </tbody> </table> Hi all, Javascript is totally new to me and I am very frustrated. I have been trying to put together this ebay template and it's all set except I can't get my thumbnails to show the large image when you mouseover it! I believe my problem is that I don't have the <script type="text/javascript"> or <language=javascript> tag in the beginning of the template. Problem is im not sure if that's the prob or where to put it!! I tried putting it at the top and it made it so the whole template disappeared. I've tried putting it at various diff places and it messes the whole thing up. I'm lost! Please help! Here's the listing (sorry I would post just the part where there's an issue but I can't tell where that is! ) http://cgi.ebay.com/ws/eBayISAPI.dll...%3DI%26otn%3D2 Hi guys, As a relative newcomer to Javascript this is killing me! Maybe someone can help... I am trying to put an image on the front page of my website that changes to one of two random images on mouseover. This part was easy, and has been done (I got the code from http://www.joemaller.com/javascript/randomroll.shtml). But what I am finding difficult is to make each image link to a different page. For example, if the user mouseovers the main image and sees the 'thumbs up' image, then clicks on it, they should be taken to the 'thumbs up' page. And if the user mouseovers the main image and sees the 'thumbs down' image, then clicks on it, they should be taken to the 'thumbs down' page. The site is he www.uninvitedcritic.com I think using 2 arrays is the way to go, but am not sure. Any help would be appreciated! Hi everyone. I'm brand new to this forum and in need of some help. If you've got a free minute and are interested in helping the clueless I've got one for you. I'm trying to form a script and the appropriate calls to fade-in some text on the event of an image mouseover. Here is what I'm working with: Code: <html>
<head>
<script type="text/javascript">
function setOpacity(level) {
element.style.opacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
var duration = 1000;
var steps = 20;
var delay = 5000;
function fadeIn() {
for (i = 0; i <= 1; i += (1 / steps)) {
setOpacity(" + i + "), i * duration;
}
}
</script>
</head>
<body>
<p id="text" style="filter:alpha(opacity=0);opacity:0.5">
This is the text.
</p>
<img name="image" src="pic.jpg" onmouseover="javascript:fadeIn(document.getElementById('text'))" />
</body>
</html>
I know there are problems with this. It looks wonky to me and I don't even know what I'm doing. It's a mashup of some code I found somewhere and my own bad guesses at how to fill in the gaps. Any tips on how I can bring this together? Thanks so much for reading this far. I appreciate your time. Hey guys i'm making a clothing website and i was just wondering.. if i have a bunch of thumbnail sized images on the page atm, how would i go about so if people put their mouse over the thumbnail, it would load the full sized T-shirt? I obviously have the images on my computer and host for the Thumbnails and the Real-image sized shirts. Thanks xx |
|||||||