|
JavaScript - Javascript Enlarge And Image Hover Over
HI,
I am looking to enlarge an image when its hovered over, can anyone give me the code for this? Thanks Similar TutorialsHi Guys, I'm wondering if anyone knows of some simple javascript that allows me to create a floating image rollover enlargement, similar to the ones on the homepage of ThemeForest. I've been Googling for hours, so, if anyone knows of a script, i'd be much appreciative. Thanks, Christian Ok. Basically, I will have images, about 150x100 that are all different. They will be displayed on a page in groups of 4. I want to make it so that if you hover over them, another image of the same size is put on top of that with part alpha. To give you an idea of what I am doing, it will be like youtube videos when you hover over them except I want there to be an image centered. I know this part of the code, but I don't know what to put inside it: Code: $(document).ready(function(){
$("img").mouseenter(function(){
//add image on top of this image
})
$("img").mouseleave(function(){
//remove covering image
})
})
What should I replace the comments with? Thanks Hi guys, I'm currently developing a simple website with a menu bar. Now this bar consists of several tabs, and I want to enlarge the tabs as soon as the user puts the mouse cursor over it. To illustrate this, here is the menu bar in normal mode: And when the user puts the cursor over the tab "Aktuelles", it should look like this: My idea was to use the jQuery-function .animate(), but the problem is that I use one background image for each tab and it is not possible to resize background images. I also tried to the <img> tag and change the height-attribute in the animate() function, but this doesn't work either. Well I have no idea left how I could solve this. Any help is very welcome. Thanks in advance, enne I have a small .png on my site. I want to view at 250% when I rollover it. Is there a way to have the 250% .png be centered vertically and horizontally where the 100% without making the 100% .png 250% bigger (ex. extra white space). Any recommendations for other ways? Hi guys. How would I implement this css: Code: .story-wrap:hover .dates This obviously allows the .dates div to react when I hover over the .story-wrap div. How would I select the same in javascript with this code: Code: $(".story-wrap .dates").hover(function () {
Because currently it just reacts when .dates is hovered over. Cheers! Hi all I have a list of items that when you hover over them it displays an image (using CSS). This is fine when the list is small but when the list is large it takes a while to load all the images... this then delays any javascript on the page from running until all the images are loaded. Is there a way to either: * Use javascript to make it so the image only loads when the link is hovered over? or * Allow the rest of the javascript on the page to run before the images are finished loading? I think i'd prefer the first solution if possible but i'm open to all ideas. Thanks in advance! Hi everyone - im trying to make the left Product Categories background position "rollover" menu work on this page: http://www.jaybrand.co.uk/p1.html at the moment the page loads and CSS hover works to set the background position so that the graphic behind makes a roll over effect. i put some javascript to set the background position permantly to the roll over on click (so the user can see which one they are on) but then this knocks out the roll over effect on all other categories - it knocks out the CSS hover: onclick="setStyle('c1','backgroundPosition','0px 0px'); it means that c1:hover no longer works.. i tried putting !important in the CSS c1:hover background position and this fixed it in Firefox but not IE. So how can i write something in Javascript to also say: onclick="setStyle('c1:hover','backgroundPosition','-276px 0px'); ......... i know Javascript does not do hyphens and the way to get for example "background-position" in CSS is to ditch the hyphen and make "P"osition capitol. perhaps something can be done also to get to the CSS hover attribute? I'm trying to recreate the fade hover effect shown on the menu at the top here http://www.dragoninteractive.com/. I have found some javascript which looks like it will do the trick. But being a graphic designer and not a web developer or anything it just doesn't work. lol Currently I have a CSS opacity filter on, but please discard that as it should just show what i am trying to achieve. This is my very first attempt at Javascript here is the html: Code: <link href="style.css" rel="stylesheet" type="text/css" /> <script src="javascript.js" type="text/javascript"></script> </head> <body> <div style="margin:20px;" class="modules"> <div class="single_module"><a class="toggleopacity" href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> </div> </body> And the CSS: Code: .modules {
margin:0px -20px 20px;
background-color:#9999CC;
min-height:100%;
width:100%;
}
.single_module {
border:solid 1px #000000;
background-color:#000000;
height:160px;
padding:0;
margin:-1px 0px 0px -1px;
width:240px;
float:left;
}
.toggleopacity img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity:0.5;
}
.toggleopacity:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity:1;
}
And the Javascript: Code: $("#single_module").css({ opacity: "0.0", display: "block" });
$("#single_module").hover(function(){$(this).fadeTo(100, 0.5);}, function(){$(this).fadeTo(300, 0.0);} );
$("#single_module").hide();
});
I'm working on a sliding panel menu in Javascript, there are just text items that have a different background when hovered over that is controlled in CSS, When the menu item is selected the background is changed to a blue button in Javascript and turned off when clicked again. The first problem I encountered was the :hover pseudoclass not working, I managed to fix that with the !important attribute, but now whenever I hover back over the now selected button the :hover effect kicks back in and replaces the background for the button. I've tried something along the lines of ul li:selectd :hover {backg...} with no luck, so far I haven't found a way to do it inside javascript. I hope that explains it well enough, any advice is much appreciated. Hello, I was wondering if anyone could help me with a personal website I am modifying for a friend. He basically has a list of links such as: Home Blog Pictures Links What I want to do is that whenever you roll over, say, "Blog", an image appears to the right of the links (the image will be a small screenshot of what the blog looks like). When you roll over "Pictures", a different image appears in it's place. I already know how to do this when rolling over images, but not rolling over text. I used document.getElementById and just set the src to the image, but how do I do this when I just have text to roll over? Is it possible/recommended to use the follow JQuery? http://ajax.googleapis.com/ajax/libs.../jquery.min.js Thank you for your time ok I have this image and i want the image to change upon the mouse hovering over it. Which in it self is simple to do and I Google numerous different ways on how to do it. But each one i would be forced to use a <a href... in it. The thing is I don't want to use it cause i am already using HTML image map. I really need help on finding the code that would work... This is what I have Code: <html> <head> </head> <body> <p align="center"><img src="room.bmp" border="1" usemap="#maps" alt="Green room" /></p> <map name="maps"> <area shape="rect" coords="25,210,100,300" href="greenroom.html#energy" > <area shape="rect" coords="130,215,185,277" href="greenroom.html#water"> <area shape="rect" coords="80,11,263,149" href="greenroom.html#tv"> </map> ............. On my website http://smstext.jigowatt.co.uk i have a menu which when you hover over certain parts popups with information. I have designed a Mooflow document that I want to popup instead (i will design a different one for each section). I cant get it to show up when you hover? I am trying to add a php link in the javascript file that links the hover images. This is my code at the moment 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]=["http://i1189.photobucket.com/albums/z423/creativeedge1/Golf-Popup1.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[1]=["http://i1189.photobucket.com/albums/z423/creativeedge1/hospitals_popup_copy.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
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
When I am trying to link the php I use this code 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]=[<link href="<?php bloginfo('template_directory'); ?>/index2.php", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[1]=["http://i1189.photobucket.com/albums/z423/creativeedge1/hospitals_popup_copy.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
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
Obviously I am doing something wrong but I'm not sure what!?? Help Please Right i need some help with some code, i have been trying 2 days to get it to work! basically the 3 image locations are in Variables in PHP $piclocation1 $piclocation2 $piclocation3 What i want is when you hover over the div class "breaking-news", i want the div ID "latest-news-image" to change to that specific image background. example the top "breaking-news" class is on hover and the image $piclocation1 should show in "latest-news-image". if the middle "breaking-news" class is on hover the image $piclocation2 should show in "latest-news-image". and so on if you could help me figure out a way around to get this to work i would be ever so greatfull, as i dont know if i got this in the right area as it would contain javascript, php and poss Css! and even if you could point me in the right direction would be helpful! this is the website page i am testing it on if you would like to look at if visually http://www.wolverhampton-wanderers.co.uk/text.php and here is the code: Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="Stylesheet" type="text/css" href="./wolves.css"/>
<title>Untitled Document</title>
<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3";
$news = mysql_query($getnews) or die(mysql_error());
$counter = 1;
while($row1 = mysql_fetch_array($news)){
if($counter == 1)
{
$picture1 = $row1['imageID'];
$getimage1 = "SELECT * FROM news_images WHERE imageID = $picture1";
$image1 = mysql_query($getimage1) or die(mysql_error());
$pic1 = mysql_fetch_array($image1);
$piclocation1 = $pic1['imageFile'];
}
if($counter == 2)
{
$picture2 = $row1['imageID'];
$getimage2 = "SELECT * FROM news_images WHERE imageID = $picture2";
$image2 = mysql_query($getimage2) or die(mysql_error());
$pic2 = mysql_fetch_array($image2);
$piclocation2 = $pic2['imageFile'];
}
if($counter == 3)
{
$picture3 = $row1['imageID'];
$getimage3 = "SELECT * FROM news_images WHERE imageID = $picture3";
$image3 = mysql_query($getimage3) or die(mysql_error());
$pic3 = mysql_fetch_array($image3);
$piclocation3 = $pic3['imageFile'];
}
$counter = $counter + 1;
}
?>
</head>
<body>
<div class="shaddow"><!-- This is the shaddow behind the content -->
<div class="content"> <!-- This is the content and main background -->
<div class="header"><img src="../images/header.jpg"/></div>
<div class="menu">
<div id="nav">
<?php
$cat = "SELECT * FROM `top-menu` ORDER BY 'category' ASC";
$category = mysql_query($cat) or die(mysql_error());
$start = 1;
while($row = mysql_fetch_array($category)){
$submenu = $row['sub-menu'];
if($submenu == '1'){
echo "</li><li><a id='{$row['Active-ID']}' " .
"href='{$row['Address']}'>" .
"{$row['Text']}</a>";
}
elseif($submenu == '2'){
if($start == 1){
echo "<ul>";
}
echo "<li><a id='{$row['Active-ID']}' " .
"href='{$row['Address']}'>" .
"{$row['Text']}</a></li>";
$start = $start + 1;
if($submenu !='2'){
echo "</ul></li>";
$start = 1;
}
}
}
echo "</ul></li><a class='nav-end'></a>";
?>
</div>
</div>
<div id="latest-news">
<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3";
$news = mysql_query($getnews) or die(mysql_error());
$counter = 0;
echo "<div id='latest-news-image'></div>" .
"<div id='latest-news-header'>Breaking News</div>";
while($row1 = mysql_fetch_array($news)){
echo "<div class='breaking-news'><div class='breaking-news-header'><a href='#'>{$row1['title']}</a></div>" .
"<div class='breaking-news-info'>Posted on {$row1['date']}, by {$row1['author']}</div>" .
"<div class='breaking-news-desc'>{$row1['desc']}</div>" .
"<div class='breaking-news-readmore'><a href='#'>Read More</a></div></div>";
$counter = $counter + 1;
}
?>
</div>
</div>
</div>
</body>
</html>
Dear all, I have been trying to replicate a cool javascript effect that appears here. See the funky images fading in when hovering with mouse? I want that ;-) By using Firebug I think I have narrowed down the code needed to: Code: <div id="main" class="clearafter">
<div class="inner clearafter">
<div class="columns clearafter">
<div class="project hovers column" style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);">
<a href="http://mountfolly.co.uk" class="image">
<img width="274" height="137" alt="project" src="/images/41_project.jpg" class="screenshot">
<img width="274" height="137" alt="project" src="/images/7_project.jpg" class="text" style="opacity: 0; display: inline;">
</a>
<h3>Text and titles etc...</h3>
<p>etc etc etc...</p>
</div>
<div style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);" class="project hovers column"></div>
</div>
</div>
</div>
<script type="text/javascript" src="/javascript/global.js"></script>
and this (which I put into a javascript file called global.js): Code: /* project listings */
// to deal with IEs opacity idiocy
$(function() {
$('.project.hovers .text').css({opacity: 0}).show();
$('.project.hovers').css({cursor: 'pointer'}).click(function() {
location.href = $('h3 > a', this).attr('href');
});
});
$('.project.hovers').hover(
function () {
$('.text',this).stop().fadeTo('100',1);
$(this).stop().animate({borderTopColor: '#E9E9E9', borderRightColor: '#E9E9E9', borderBottomColor: '#E9E9E9', borderLeftColor: '#E9E9E9', backgroundColor: '#EEE' }, 100)
},
function () {
$('.text',this).stop().fadeTo(1000,0);
$(this).stop().animate({borderTopColor: '#FFF', borderRightColor: '#FFF', borderBottomColor: '#FFF', borderLeftColor: '#FFF', backgroundColor: '#FFF' }, 1000)
}
);
But when I re-create the files (index.html, global.js, and replacement images) all I get is this. No hover effect... Any ideas what is missing? Would appreciate some help. Thanks, Wysiwyger PS: If you fancy a laugh, check these out Hey, I want javascript to change the background image on hover. This is my javascript: Code: function navOver(obj){
var imgUrl = 'url(images/' + obj.id + '.hover.png) center no-repeat';
obj.style.background='imgUrl';
}
function navOut(obj){
var imgUrl = 'url(images/' + obj.id + '.png) center no-repeat';
obj.style.background='imgUrl';
}
and this is the HTML: Code: <li id="home" onmouseover="navOver(this)" onmouseout="navOut(this)"></li> This doesn't work, can anyone help me and say me what to do? Hello all. I'm sure this is really easy, but I have a question about being able to change a main image depending on a mouseover of particular text. I have a website where I am hosting a recipe, and I want to be able to show a 'main' picture that changes depending on where the user is hovering in the instructions. It would be very similar to this: http://piscesmike.com/Pages/recipes/onions.html The exception being that the top images are replaced by line by line instructions, and the main image changes depending on which instruction you are hovering on. Alternatively, I could also use a pop-up window with the image for the particular instruction, but could not get that to work either. I coded everything for the above link, but just cant seem to get this working. Any help is greatly appreciated. And, also feel free to try out the recipe's from PiscesMike.com, or to poke around. I know there are a few other errors (one being the day of the week deal) so once again, any input or help would be a tremendous help. Thanks and sorry for being such a noob! Hi there, I am looking to make a javascript hover menu. Like the main hover menus at websites like... http://www.godaddy.com and http://www.mediatemple.com How can i do this? Are there any tutorials? And is javascript the best language to do this in, or ajax or web2.0 ? How can I add fadeIn and fadeOut with a duration that I can set/adjust to this javascript? The site is using Zencart and the the Image Hover effect comes from the Image Handler 2 Add-on. Thank you in advance for your help. Your time and attention in helping me with this is greatly appreciated. Here is a link to the site residing on a subdomain I use to build sites on http://test3.fullspecweb.com I read the "Read Before Posting" and it said to only post the code you are having trouble with, but I have no idea which section that would be so I apologize for being such a noob Here is the script from the jscript_imagehover.js file... Code: var offsetfrommouse=[20,20]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400; // maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet
// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;
var vpos;
//Detect IE
var stIsIE = /*@cc_on!@*/false;
//detect opera
var isOpera =
window.opera?1:0;
// Detect Webkit browsers
var isWebKit =
navigator.userAgent.indexOf("AppleWebKit") > -1;
if (document.getElementById || document.all){
document.write('<div id="trailimageid">');
document.write('</div>');
}
function getObj(name) {
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
} else if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
} else if (document.layers) {
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
function gettrail(){
return new getObj("trailimageid");
}
function truebody(){
if (isWebKit){
return document.body;
}else if (isOpera) {
return document.documentElement;
}else{
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
}
function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
zoomimg_w=zoomimgwidth;
zoomimg_h=zoomimgheight;
if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
trailobj = gettrail().obj;
trailobj.style.width=(zoomimgwidth+(2*padding))+"px";
trailobj.style.height=(zoomimgheight+(2*padding))+"px";
trailobj.setAttribute("startx", startx);
trailobj.setAttribute("starty", starty);
trailobj.setAttribute("startw", startw);
trailobj.setAttribute("starth", starth);
trailobj.setAttribute("imagename", imagename);
trailobj.setAttribute("imgtitle", title);
document.onmousemove=followmouse;
}
function hidetrail(){
trailstyle = gettrail().style;
trailstyle.visibility = "hidden";
document.onmousemove = "";
trailstyle.left = "-2000px";
trailstyle.top = "-2000px";
}
function followmouse(e){
var xcoord=offsetfrommouse[0];
var ycoord=offsetfrommouse[1];
if (stIsIE){
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);
}
else
{
var docwidth=pageXOffset+window.innerWidth-15;
var docheight=Math.min(window.innerHeight);
}
var relativeX = null;
var relativeY = null;
if (typeof e != "undefined"){
if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
relativeX = e.layerX;
relativeY = e.layerY;
} else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
// relativeX = e.x; // original code replaced to work with Opera
// relativeY = e.y; // original code replaced to work with Opera
relativeX = event.offsetX;
relativeY = event.offsetX;
}
if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
} else {
xcoord += e.pageX;
}
if (docheight - e.pageY < zoomimg_h + (2 * padding)){
ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
// returning different values for ff and (opera and webkit) - fixed 12th june 2010
} else {
ycoord += e.pageY;
}
} else if (typeof window.event != "undefined"){ // Seems to be IE
if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
relativeX = event.x;
relativeY = event.y;
} else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
relativeX = event.offsetX;
relativeY = event.offsetY;
}
if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
} else {
xcoord += truebody().scrollLeft+event.clientX;
}
/* event.clientY is not valid in firefox netscape or opera, but ie has to use it */
var ie_offset = -20;
if ( docheight - event.clientY < zoomimg_h + (2 * padding) ){
/*
ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) - (docheight + truebody().scrollTop -event.clientY) ) );
*/
ycoord += ie_offset + truebody().scrollTop + event.clientY - Math.max(0,(0 + zoomimg_h + (2 * padding) - (docheight - event.clientY) ) );
} else {
ycoord += ie_offset + truebody().scrollTop + event.clientY;
}
}
trail = gettrail();
startx = trail.obj.getAttribute("startx");
starty = trail.obj.getAttribute("starty");
startw = trail.obj.getAttribute("startw");
starth = trail.obj.getAttribute("starth");
imagename = trail.obj.getAttribute("imagename");
title = trail.obj.getAttribute("imgtitle");
// calculate and set position BEFORE switching to visible
if (stIsIE){
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
}else{
var docwidth=pageXOffset+window.innerWidth-15;
var docheight=Math.max(document.body.offsetHeight, window.innerHeight);
}
if(ycoord < 0) { ycoord = ycoord*-1; }
if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
trail.style.left=xcoord+"px";
trail.style.top=ycoord+"px";
if (trail.style.visibility != "visible") {
if (((relativeX == null) || (relativeY == null)) ||
((relativeX >= startx) && (relativeX <= (startx + startw))
&& (relativeY >= starty) && (relativeY <= (starty + starth)))){
newHTML = '<div><h1>' + title + '</h1>';
newHTML = newHTML + '<img src="' + imagename + '"></div>';
trail.obj.innerHTML = newHTML;
trail.style.visibility="visible";
}
}
}
hi, i want to write a js function which will change images (i have an array of images) on mouse over till the time i have my mouse over the image. i have written function: Code: function changeImage(testImage,source)
{
var my_array=testImage.split("||");
var actualLen = my_array.length - 2;
for (i=0;i<my_array.length;i++)
{
document.getElementById("lrgPic" + source).setAttribute("src",my_array[i]);
setTimeout('',1000);
if(i == ( my_array.length - 1 ))
{ // i = (( my_array.length - 1 ) - i) - 1; // alert(i);
}
}
}
but the action i want is: on hovering over the image (location: "lrgPic" in above code) images should keep on changing grabbing the location from array ("my_array" above) and the image change should happen after every sec. i have tried "setTimeout" function; but it's not working as desired. with the code which is commented above.. i want to reset the loop so that images are continuously changed till "onmouseOut" is performed... any clues guys.. how can i improve on this code? with this code.. my script goes in infinite loop.. please help thanks in advance I have searched for information on this but so far no luck. site: http://www.brentpurton.com/TrueSteez go to the product page The problem: I have a set of images that have hover scrolling. The idea is that when you click on the thumbnail image at the bottom in the hover scroll area, a swap image behaviour will change the picture on the shirt. The real problem is that when I implement the swap image on the thumbnails and preveiw it. They no longer Hover Scroll, they just stay in 1 spot. They do however swap the image. here is what happens: http://www.brentpurton.com/TrueSteezSwap Any Help is apreciated. Thanks in advance |
|||||||