|
JavaScript - Image Zoom Mouseover
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. Similar TutorialsI think this is done by Javascript. I have seen a website that has a great image zoom function and would like to be able to add this function to my website. I'm afraid my Javascript isn't very good. Could anyone tell me where I can get a script to do this or how else if there is some free software that could do it? The webpage is: http://www.next.co.uk/shopping/homew...roomdecor/17/4 On this page if you click on Zoom on the left another image comes up on the right and when you mouse over the square on the left image it zooms the right image. All help will is much appreciated Hi, I need some help for rotate and zoom image as in link below. any one can help me? http://kroppr.rborn.info/ http://crop.smally.net/ Zoom Slider - A Javascript Slideshow I've been looking for some tutorials on how to make a zoom image slider like the one I posted as a link. Does anyone have any examples that I can use to help me. Thanks!
Please help. I am using Image Zoom JQuery script for one gift page because it is browser compatible and it works great. But they want me to add this script to the previous thumbnail page. So the thumbnails have to be a zoomable image as well as a clickable link to go to the next page. The JQuery script I can't seem to do both with but MojoZoom script you can except it does not do well in any browsers except Mozilla. It uses a data-zoomsrc to bring in the larger image. I just can't get it to work in anything but mozilla. I have tried messing with the .css and the .js file with no luck in controlling where the zoomed image falls on the page. In IE it shows way up above the thumbnail instead of directly next to the thumbnial. Please any help is appreciated. Or if you have another type of image zoom script that you are familiar with please suggest. I have seen other posts but not to do with the image being clickable and zoomable.
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 m using the below code to disable ctrl+ and ctrl- (zoom in/out using keyboard). The below code is working in firefox but it is not working in IE. The return false; is not working in IE. can you please some one help in this? $(document).ready(function() { var ctrlDown = false; var ctrlKey = 17, vKey = 189, cKey = 187; $(document).keydown(function(e) { if (e.keyCode == ctrlKey) ctrlDown = true; }).keyup(function(e) { if (e.keyCode == ctrlKey) ctrlDown = false; }); $(document).keydown(function(e) { //alert(ctrlDown); if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)) return false; }); }); Please provide me do you have any other code to do this? Thanks, Jagadeesh. 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.
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 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>' 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!
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. 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 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 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, 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 Hi Im trying to creat a website so when the small image is rolled over a new page opens in the frame ( called main) i will upload it now to http://www.e-z-host.com/GZ/ all help apricated ! at the momment you have to click to open the page in the main frame. I am currently working in Microsoft Frontpage designing a website for a friend. I was trying to make a JS alert come up when I mouse over an image and I have had no luck at all. This is the bit of code where The alert needs to be. I am a bit new to Javascript so I apologize if this was a stupid question. Code: <img border="0" src="../gallery%20pictures/Home.png" width="468" height="60"><br> <br> <p align="center"> <img <FORM src="../gallery%20pictures/THE%20BUTTON.png" width="388" height="372"> <br> </p> <p> </p> </body> </html> 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 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>
|
|||||||