|
JavaScript - Changing Multiple Images Onmouseover
Hey all,
First off, just wanted to send a big thanks out to everyone on this board that has helped me along my path, you all have been a really big help! Ok, now on to today's question. I have a nice little script that changes a company's logo (displayed in a side bar) when the user mouses over a part of an image map. Here is the basic code: Code: <head>
<?php
//assign array of links to string
$row_limit = $num_rows - 1;
for ($otmm_loop=0;$otmm_loop<$num_rows;$otmm_loop=$otmm_loop+1)
{
if ($otmm_loop == 0)
{
$otmm_image_string = "$pic_adr_array[$otmm_loop]".",";
}
elseif ($otmm_loop == $row_limit)
{
$otmm_image_string = "$otmm_image_string"."$pic_adr_array[$otmm_loop]";
}
else
{
$otmm_image_string = "$otmm_image_string"."$pic_adr_array[$otmm_loop]".",";
}
}
$s1 = "$otmm_image_string";
$qs1 = "\"".implode("\",\"",explode(",",$s1))."\"";
<script type="text/javascript">
function doChanges(y){
var z= y;
var imagevar = myimages[z];
var imagethis = this.href;
changeimage(imagevar,imagethis);
}
</script>
<script type="text/javascript">
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script type="text/javascript">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages(<?echo("$qs1");?>);
</script>
</head>
<body>
<a href="javascript:warp()"><img src="/images/OnTheMiningMap/rilogo.png" name="targetimage" border="2"></a>
<img src="http://www.the-rational-investor.com/images/OnTheMiningMap/<?echo("$map_version");?>"
BORDER="2"
usemap="#mymap">
<MAP NAME="mymap">
<area shape="rect" coords="<?echo("$rilogo_x_start");?>,<?echo("$rilogo_y_start");?>,<?echo("$rilogo_x_end");?>,<?echo("$rilogo_y_end");?>" onMouseover="doChanges(0)" href="http://www.therationalinvestor.ca/" rel="nofollow" target="_blank" Title="The Rational Investor" alt="The Rational Investor">
<area shape="rect" coords="<?echo("$autism_x_start");?>,<?echo("$autism_y_start");?>,<?echo("$autism_x_end");?>,<?echo("$autism_y_end");?>" onMouseover="doChanges(1)" href="http://www.autismbc.ca/" rel="nofollow" target="_blank" Title="Autism Society of BC" alt="Autism Society of British Columbia">
<area shape="rect" coords="<?echo("$britania_x_start");?>,<?echo("$britania_y_start");?>,<?echo("$britania_x_end");?>,<?echo("$britania_y_end");?>" onMouseover="doChanges(2)" href="http://www.britaniaminingmuseum.ca/" rel="nofollow" target="_blank" Title="Britannia Mining Museum" alt="Britannia Mining Museum">
<area shape="rect" coords="<?echo("$sable_x_start");?>,<?echo("$sable_y_start");?>,<?echo("$sable_x_end");?>,<?echo("$sable_y_end");?>" onMouseover="doChanges(3)" href="http://sableresources.com/" rel="nofollow" target="_blank" Title="Sable Resources - Shasta" alt="Sable Resources - Shasta">
<area shape="rect" coords="<?echo("$northgate_x_start");?>,<?echo("$northgate_y_start");?>,<?echo("$northgate_x_end");?>,<?echo("$northgate_y_end");?>" onMouseover="doChanges(4)" href="http://northgateexploration.com/Home/default.aspx" rel="nofollow" target="_blank" Title="Northgate Resources - Kemess South" alt="Northgate Resources - Kemess South">
<area shape="rect" coords="<?echo("$thompson_x_start");?>,<?echo("$thompson_y_start");?>,<?echo("$thompson_x_end");?>,<?echo("$thompson_y_end");?>" onMouseover="doChanges(5)" href="http://www.thompsoncreekmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Thompson Creek Metals - Endako" alt="Thompson Creek Metals - Endako">
<area shape="rect" coords="<?echo("$imperial_x_start");?>,<?echo("$imperial_y_start");?>,<?echo("$imperial_x_end");?>,<?echo("$imperial_y_end");?>" onMouseover="doChanges(6)" href="http://www.imperialmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Imperial Metals - Huckleberry" alt="Imperial Metals - Huckleberry">
<area shape="rect" coords="<?echo("$westerncoal_x_start");?>,<?echo("$westerncoal_y_start");?>,<?echo("$westerncoal_x_end");?>,<?echo("$westerncoal_y_end");?>" onMouseover="doChanges(7)" href="http://www.westerncoal.com/" rel="nofollow" target="_blank" Title="Western Coal - Brule, Dillon, Perry Creek" alt="Western Coal - Brule, Dillon, Perry Creek">
<area shape="rect" coords="<?echo("$peaceriver_x_start");?>,<?echo("$peaceriver_y_start");?>,<?echo("$peaceriver_x_end");?>,<?echo("$peaceriver_y_end");?>" onMouseover="doChanges(8)" href="http://www.peacerivercoal.com/" rel="nofollow" target="_blank" Title="Peace River Coal" alt="Peace River Coal">
<area shape="rect" coords="<?echo("$teckcoal1_x_start");?>,<?echo("$teckcoal1_y_start");?>,<?echo("$teckcoal1_x_end");?>,<?echo("$teckcoal1_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Fording River" alt="Teck Coal Fording River">
<area shape="rect" coords="<?echo("$teckcoal2_x_start");?>,<?echo("$teckcoal2_y_start");?>,<?echo("$teckcoal2_x_end");?>,<?echo("$teckcoal2_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Greenhills" alt="Teck Coal Greenhills">
<area shape="rect" coords="<?echo("$teckcoal3_x_start");?>,<?echo("$teckcoal3_y_start");?>,<?echo("$teckcoal3_x_end");?>,<?echo("$teckcoal3_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Line Creek" alt="Teck Coal Line Creek">
<area shape="rect" coords="<?echo("$teckcoal4_x_start");?>,<?echo("$teckcoal4_y_start");?>,<?echo("$teckcoal4_x_end");?>,<?echo("$teckcoal4_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Elkview" alt="Teck Coal Elkview">
<area shape="rect" coords="<?echo("$teckcoal5_x_start");?>,<?echo("$teckcoal5_y_start");?>,<?echo("$teckcoal5_x_end");?>,<?echo("$teckcoal5_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Coal Mountain" alt="Teck Coal Coal Mountian">
<area shape="rect" coords="<?echo("$imperial2_x_start");?>,<?echo("$imperial2_y_start");?>,<?echo("$imperial2_x_end");?>,<?echo("$imperial2_y_end");?>" onMouseover="doChanges(10)" href="http://www.imperialmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Imperial Metals - Mount Polley" alt="Imperial Metals - Mount Polley">
<area shape="rect" coords="<?echo("$teck_x_start");?>,<?echo("$teck_y_start");?>,<?echo("$teck_x_end");?>,<?echo("$teck_y_end");?>" onMouseover="doChanges(11)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck - Huckleberry" alt="Teck - Huckleberry">
<area shape="rect" coords="<?echo("$taseko_x_start");?>,<?echo("$taseko_y_start");?>,<?echo("$taseko_x_end");?>,<?echo("$taseko_y_end");?>" onMouseover="doChanges(12)" href="http://www.tasekomines.com/tko/Home.asp" rel="nofollow" target="_blank" Title="Taseko - Gibralar" alt="Taseko - Gibralar">
<area shape="rect" coords="<?echo("$roca_x_start");?>,<?echo("$roca_y_start");?>,<?echo("$roca_x_end");?>,<?echo("$roca_y_end");?>" onMouseover="doChanges(13)" href="http://www.rocamines.com/s/Home.asp" rel="nofollow" target="_blank" Title="Roca - Max" alt="Roca - Max">
<area shape="rect" coords="<?echo("$breakwater_x_start");?>,<?echo("$breakwater_y_start");?>,<?echo("$breakwater_x_end");?>,<?echo("$breakwater_y_end");?>" onMouseover="doChanges(14)" href="http://www.breakwater.ca/" rel="nofollow" target="_blank" Title="Breakwater - Myra Falls" alt="Breakwater - Myra Falls">
<area shape="rect" coords="<?echo("$hillsborough_x_start");?>,<?echo("$hillsborough_y_start");?>,<?echo("$hillsborough_x_end");?>,<?echo("$hillsborough_y_end");?>" onMouseover="doChanges(15)" href="http://www.hillsboroughresources.com/" rel="nofollow" target="_blank" Title="Hillsborough - Quinsam" alt="Hillsborough - Quinsam">
</MAP>
</body>
My question is, how can I get three different images (company logo, weekly price chart and monthly price chart - all of which are in an image folder on my server) to change on this one mouseover event. I tried replicating the function three times and altering each function's name but that ended up screwing the whole thing up. Any thoughts/suggestions would be greatly appreciated, Brian Similar TutorialsHello! I have created a mouseover/mouseout event using 2 images. I am not sure how to add a third image so the mouseover/mouseout event changes images in sequence each time the mouse is passed over the image and keeps cylcing in order. Would you use an array with a for loop counter for this process? Also, how would you call the function? I guess you would place the call in the mouseover where you would normally put the image to be called? Thanks! Hello all, I have a question regarding onmouseover on "a" tag. I currently have a list of "img" thumbnails which have onMouseOver attached to the "a" tag which wraps the "img". When the mouse is over the image, a "preview" of the image will load in another div via a javascript function, this javascript function has a jquery fadeto effect so the preview will fade into view. The problem now is if a user hover over multiple thumbnails quickly, the onMouseOver event is registered multiple times, so when the user finally stop hovering over multiple thumbnails quickly, the last thumbnail will receive the event multiple times and fades in not only once. Below is my code: function previewimage(loadimg){ jloadimg='<img src="../images/'+loadimg+'.png" />'; //stimulate a fade in effect by making the image has 0.7 opacity first $(#largeimage).fadeTo('fast', 0.7, function() { }); $(#largeimage).fadeTo('slow', 1, function() { }); document.getElementById('largeimage').innerHTML=jloadimg; } for the list of thumbnail images, I have: <a onMouseOver="previewimage('imagefile1');"><img src="path/to/thumbnail/image1.png" /></a> <a onMouseOver="previewimage('imagefile2');"><img src="path/to/thumbnail/image2.png" /></a> <a onMouseOver="previewimage('imagefile3');"><img src="path/to/thumbnail/image3.png" /></a> How do I cancel multiple event from running continuosly if the previous one is still in queue? hi, please ignore this thread..it is a duplicate of one already active. MODS please delete. apologies for my mistake. Hi, Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow: http://www.javascriptkit.com/script/...ifferent.shtml to use on my site. Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script? If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations? Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2. Thanks in advance Script Below: Code: <script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages(my images here)
</script>
For the Links:
<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>
For the Image:
<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>
anyone know a script or way to change images based on radio button on another page or way to send value or src of an image to another page and way to have it show up.
I am probably use way too much code to have this done.. but this is what I came up with.. Code: $(function() {
$("#mail")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
$(this).attr("src", src);
$(this).css("bottom", 10);
$(".msg").text("Signup for Alpha Web Pro, you get your own email account with us. [username]@alphawebpro.com").show("slow");
})
.mouseout(function() {
var src = $(this).attr("src").replace("_over", "");
$(this).attr("src", src);
$(this).css("bottom", "5");
$(".msg").text("").hide("slow");
});
$("#user")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
$(this).attr("src", src);
$(this).css("bottom", 10);
$(".msg").text("Check out the Alpha Web Pro community. There you can interact with your programming friends and post things to the forum").show("slow");
})
.mouseout(function() {
var src = $(this).attr("src").replace("_over", "");
$(this).attr("src", src);
$(this).css("bottom", "5");
$(".msg").text("").hide("slow");
});
});
$("#analytics")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
$(this).attr("src", src);
$(this).css("bottom", 10);
$(".msg").text("COMING SOON! - Website analytics for any and all of your websites you wish to monitor").show("slow");
})
.mouseout(function() {
var src = $(this).attr("src").replace("_over", "");
$(this).attr("src", src);
$(this).css("bottom", "5");
$(".msg").text("").hide("slow");
});
});
$("#shop")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
$(this).attr("src", src);
$(this).css("bottom", 10);
$(".msg").text("Go shopping at Alpha Web Pro.com; we have what you are looking for. Website templates, scripts, and ebooks for noobs all the way to master coder").show("slow");
})
.mouseout(function() {
var src = $(this).attr("src").replace("_over", "");
$(this).attr("src", src);
$(this).css("bottom", "5");
$(".msg").text("").hide("slow");
});
});
Problem is it doesn't do anything. When I only have one image set to change on mouseover it works fine.. I put two or more in there it doesn't work on any of the images. Any idea whats going on? Thanks in advanced! I currently have an image and underneath it there are 6 thumbnails. When I run the cursor over them the big image changes. This works fine. However, I would like to have text beside the big picture that also changes depending on the thumbnail over which I am hovering. I have tried to work it out myself but failed miserably. I have tried forums, but can't find what I need. My code as it stands at the moment is: <script type="text/javascript"> if (document.images) {image0 = new Image; image0.src = "i/p0.png"; image1 = new Image; image1.src = "i/p1.png"; image2 = new Image; image2.src = "i/p2.png"; image3 = new Image; image3.src = "i/p3.png"; image4 = new Image; image4.src = "i/p4.png"; image5 = new Image; image5.src = "i/p5.png"; image6 = new Image; image6.src = "i/p6.png"; }</script> and <img class="img" src="i/p0.png" align="left" width="300" name="rollimg" title='blah' alt="blah"/> <span class="inverse-text"><this is where I want changing text to appear as I roll over thumbnails.</span> <br clear="all"/> <span onmouseover="document.rollimg.src=image0.src;"><img src="i/tb/t0.jpg" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image1.src;"><img src="i/tb/t1.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image2.src;"><img src="i/tb/t2.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image3.src;"><img src="i/tb/t3.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image4.src;"><img src="i/tb/t4.gif" class="img" width="70" alt="blah" title="blah"/> <span onmouseover="document.rollimg.src=image5.src;"><img src="i/tb/t5.gif" class="img" width="70" alt="blah" title="blah"/> <span onmouseover="document.rollimg.src=image6.src;"><img src="i/tb/t6.gif" class="img" width="70" alt="blah" title="blah"/> Ideally if you could tell me how to update the above script and code, so that it works, I would be very grateful. I'm using code based on these functions to fade images up from black as part of a slideshow: Code: function fade_down(id, millisec) {
// fade image from 0% to 100% visible
var speed = Math.round(millisec / 100);
var timer = 0;
for(i = 100; i >= 0; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
function fade_up(id, millisec) {
// fade image from 0% to 100% visible
var speed = Math.round(millisec / 100);
var timer = 0;
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
function changeOpac(opacity, id) {
//change the opacity for different browsers
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
It works OK but there is often noticeable flicker, even when the images are preloaded. See here http://www.pwtphoto.com/flowers/slid.../D300_1873.jpg and click "Start Slidehow". This happens in all browsers - it's not the well documented Firefox glitch. The images are pretty large - typically 1000 x 670 pixels - which may be part of the problem. Is there a way to fade images up or down more smoothly? Is there any alternative to using opacity? Thanks. Hello, I am trying to connect images to some anchor tags, but each anchor matches a specific image. The aim is that when someone clicks on a certain link it will display an image (which is some text information). I have some code from a previous thread which I gained a really good script from the help. I'm not sure how to connect these anchors to the specific image. I'm sure this code only needs tweaking slightly to give me what I need. Here is the code relevant to my issue: HTML: Code: <div id="faqBox"> <h1 id="faqHeader"><u>F.A.Q's</u></h1> <ul> <li><a href="#" onclick="">What is the purpose of this website?</a></li> <li><a href="#">What type of achievements would someone of had to do to be eligable?</a></li> <li><a href="#">Why was this award created?</a></li> <li><a href="#">How do we nominate somebody?</a></li> <li><a href="#">How are people presented with this award?</a></li> </ul> </div> <div id="faqInfoBox"> <img src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" /> </div> CSS: Code: #faqInfoBox {width: 40%;
border: 5px ridge;
height: 310px;
background: #606626;
float: right;
margin-right: 3%;}
#faqBox ul li{font-family: trebuchet ms;
line-height: 30px;
list-style-type: square;}
JS: Code: var imgArray = new Array(4);
imgArray[0] = 'images/content1.png';
imgArray[1] = 'images/content2.png';
imgArray[2] = 'images/content3.png';
imgArray[3] = 'images/content4.png';
imgArray[4] = 'images/content5.png';
var currIndex = 0;
function imgChange(that)
{
if(currIndex < myImages.length - 1) {
that.src = myImages[++currIndex];
}else {
currIndex = 0;
that.src = myImages[currIndex];
}
}
The JavaScript is what needs tweaking. I also have it uploaded to my free domain which you can find the site he http://abjava.host22.com/Site1/ if you would care to take a look. I don't want to be fed the answer but just some pointers/tips on what I could do. I was thinking of connecting the function to the anchor tags onclick event. But because I need the specific images to display when their relative link is clicked I know it could be harder to do this. I want to stack the images on top of each other and hide their display then when a link is clicked show it, when another is clicked, hide the first and show that one. (Please note,the last 4 images have not yet been created). I can figure out to do the CSS for this so just any help on the JS side will be very helpful to me. Thank you very much in advance if anyone can help. Regards, LC. I have a problem when changing images and image maps with mouseover and click events in IE. Firefox, Chrome and Safari all work well but IE does not. It's hard to describe but when I mouse over a hot spot the image changes and then right away changes back. you can see it here: here is the Javascript code: Code: var current_overID = "";
var last_overID = "";
function item (img_name,width,height)
{
img_prefix = img_name;
this.slide_img = new Image (width,height);
this.slide_img.src = "http://www.dsisyr.com/images/stories/DeltaV/" + img_prefix + ".jpg";
}
function new_item (img_name,width,height)
{
item [img_name] = new item (img_name,width,height);
}
function mouseover (itemID, mapID)
{
current_overID = itemID;
if (current_overID != last_overID) {
document.deltavmap.src = item [current_overID].slide_img.src;
document.deltavmap.useMap=mapID;
}
}
new_item ("DSI-DeltaV1",700,300);
new_item ("DSI-DeltaV1-2-1",700,300);
new_item ("DSI-DeltaV1-2-2",700,300);
.....many more
<MAP NAME="deltav">
<AREA SHAPE="RECT" COORDS="27,27,219,53" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng')" window.defaultStatus='' window.status='Engineering' return true >
<AREA SHAPE="RECT" COORDS="27,74,171,97" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-3-1', '#sw')" window.defaultStatus='' window.status='Software'; return true >
<AREA SHAPE="RECT" COORDS="27,122,270,145" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-4-1', '#doc')" window.defaultStatus='' window.status='Documentation'; return true >
<AREA SHAPE="RECT" COORDS="27,167,156,195" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-5-1', '#sup')" window.defaultStatus='' window.status='Support'; return true >
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
<MAP NAME="eng">
<AREA SHAPE="RECT" COORDS="38,52,244,75"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng') "
window.defaultStatus=''
window.status='Batch Processing' return true
>
<AREA SHAPE="RECT" COORDS="40,82,230,103"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-2', '#eng')"
window.defaultStatus=''
window.status='Control Modules' return true
>
<AREA SHAPE="RECT" COORDS="40,112,143,136"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-3', '#eng')"
window.defaultStatus=''
window.status='Graphics' return true
>
<AREA SHAPE="RECT" COORDS="40,141,176,168"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-4', '#eng')"
window.defaultStatus=''
window.status='ProtoTyping' return true
>
<AREA SHAPE="RECT" COORDS="24,224,84,234"
HREF="#" OnClick="mouseover('DSI-DeltaV1-3-1', '#sw')"
window.defaultStatus=''
window.status='Software' return true
>
<AREA SHAPE="RECT" COORDS="24,236,124,247"
HREF="#" OnClick="mouseover('DSI-DeltaV1-4-1', '#doc')"
window.defaultStatus=''
window.status='Documentation' return true
>
<AREA SHAPE="RECT" COORDS="25,248,76,261"
HREF="#" OnClick="mouseover('DSI-DeltaV1-5-1', '#sup')"
window.defaultStatus=''
window.status='Support' return true
>
<AREA SHAPE="RECT" COORDS="620,240,699,399" HREF="#" OnClick="mouseover('DSI-DeltaV1', '#deltav')" window.defaultStatus='' window.status='deltav'; return true >
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
... many others
Can any one tell me what i need to do to fix this in IE? Thanks! Fayette Hello can anyone help me with modestmaps? I need to add my own map I mean lots of images to it but my JS knowledge is kinda poor. Can anyone help? Feel free to suggest other map frameworks I don't need anything special it should be light-weight, ability to add my own maps and put some markers on it. Thanks in advance. EDIT: Oh I forgot and license should allow modifications and using it in website which is comerecial. I mean I won't take payment for viewing it but it still comercial. Hi all, I have a number of images placed on a map (the images are dots indicating a location) When clicked, that displays different textual information somewhere on the page. View here and click the dots on the map for what I am trying to explain: http://www.garethhardy.com/Shine/?page_id=6 What I want to do now is to toggle these dots so that when clicked, the dot turns white. This I could do with some code I found on the net. However, I need it to toggle all images. In that if one image has been clicked and turned white, and then the user clicks a different black ot, then that black dot should turn white, and the white dot should turn back clack. Hope that makes sense! Thanks in advance Dan I'm still kinda new at this. Please bear with me..I'm trying to make all imgs move in different directions using the following code. I was givin the code and I need to insert something into it so this will work. I just can't understand it and WANT to ..driving me NUTTY. 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>
<title>BUZZ</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
var widthMax = 0;
var heightMax = 0;
var buzzSpeed = new Array(3);
buzzSpeed[0] = 10;
var xPosition = new Array(3);
xPosition = -20;
var yPosition = new Array(3);
yPosition[0] = 0;
var xDirection = new Array(3);
xDirection[0] = "right";
var yDirection = new Array(3);
yDirection[0] = "down";
function setBug(newStartPoint) {
widthMax = document.documentElement.clientWidth;
heightMax = document.documentElement.clientHeight;
setInterval("flyBug(0)", 30);
}
function flyBug(curBug) {
var activeBug = document.getElementById("bugImage" + curBug);
var activeElement = document.getElementById("bugElement" + curBug);
if (xDirection[curBug] == "right" && xPosition[curBug] > (widthMax - activeBug.width - buzzSpeed[curBug]))
xDirection[curBug] = "left";
else if (xDirection[curBug] == "left" && xPosition[curBug] <= 0)
xDirection[curBug] = "right";
if (yDirection[curBug] == "down" && yPosition[curBug] > (heightMax - activeBug.height - buzzSpeed[curBug]))
yDirection[curBug] = "up";
else if (yDirection[curBug] == "up" && yPosition[curBug] <= 0)
yDirection[curBug] = "down";
if (xDirection[curBug] == "right")
xPosition[curBug] = xPosition[curBug] + buzzSpeed[curBug];
else if (xDirection[curBug] == "left")
xPosition[curBug] = xPosition[curBug] - buzzSpeed[curBug];
else
xPosition[curBug] = xPosition[curBug];
if (yDirection[curBug] == "down")
yPosition[curBug] = yPosition[curBug] + buzzSpeed[curBug];
else if (yDirection[curBug] == "up")
yPosition[curBug] = yPosition[curBug] - buzzSpeed[curBug];
else
yPosition[curBug] = yPosition[curBug];
activeElement.style.left = xPosition[curBug] + document.documentElement.scrollLeft + "px";
activeElement.style.top = yPosition[curBug] + document.documentElement.scrollTop + "px";
}
window.onresize = setBug;
</script>
</head>
<body onload="setBug()">
<div id="bugElement0" style="position:absolute; left:20px; top:0px;">
<img id="bugImage0" src="bug.jpg" alt="buggy" height="48" width="48" /></div>
<div id="bugElement1" style="position:absolute; left:25%; top:75%;">
<img id="bugImage1" src="bug.jpg" alt="buggy1" height="48" width="48" /></div>
<div id="bugElement2" style="position:absolute; left:40%; top:48%;">
<img id="bugImage2" src="bug.jpg" alt="buggy2" height="48" width="48" /></div>
<div id="bugElement3" style="position:absolute; left:58%; top:58%;">
<img id="bugImage3" src="bug.jpg" alt="buggy3" height="48" width="48" /></div>
<div id="bugElement4" style="position:absolute; left:90%; top:75%;">
<img id="bugImage4" src="bug.jpg" alt="buggy4" height="48" width="48" /></div>
</body>
</html>
I am trying to make different images hover over a table of sliced images when you mouse over a particular image. ex. mouse over image 1 = have image 1.1 hover over entire table of images in spot A; mouse over image 2 = have image 2.2 hover over entire table of images in spot B....ect. what i have so far only allows me to mouse over image 1 and have image 1.1 hover over entire table in spot A. Any time i try to move forward with more div's on other images it just jacks everything up. Here it is:
Code: <html>
<head>
<title>map</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function init()
{
loadAll(document.getElementById('map1'));
}
window.onload = init;
function loadAll(arrayLoading)
{
var areas = arrayLoading.getElementsByTagName('area');
for(var i=0;i<areas.length;i++) areas[i].onmouseover = mouseIsOver;
}
function mouseIsOver()
{
var area = this;
var coords = this.coords;
var x1 = parseInt(coords);
coords = coords.substring(coords.indexOf(",") + 1);
var y1 = parseInt(coords);
coords = coords.substring(coords.indexOf(",") + 1);
var x2 = parseInt(coords);
coords = coords.substring(coords.indexOf(",") + 1);
var y2 = parseInt(coords);
var img = document.createElement("img");
img.src = area.getAttribute("imgSrc");
img.style.position = 'absolute';
img.style.left = x1 + 'px';
img.style.top = y1 + 'px';
img.style.height = y2 - y1 + 'px';
img.style.width = x2 - x1 + 'px';
area.parentNode.appendChild(img);
img.onmouseout = function ()
{
this.parentNode.removeChild(this);
setTimeout(function () { area.onmouseover = mouseIsOver; }, 50);
};
area.onmouseover = null;
}
</script>
<style type="text/css">
#map1
{
position: relative;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (map.psd) -->
<table id="Table_01" width="651" height="761" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="14">
<img src="images/map_01.png" width="650" height="213" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="213" alt="" /></td>
</tr>
<tr>
<td colspan="11">
<img src="images/map_02.png" width="442" height="48" alt="" /></td>
<td colspan="2">
<img src="images/map_03.png" width="87" height="48" alt="" /></td>
<td rowspan="14">
<img src="images/map_04.png" width="121" height="547" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="48" alt="" /></td>
</tr>
<tr>
<td colspan="6" rowspan="4">
<img src="images/map_05.png" width="257" height="164" alt="" /></td>
<td colspan="3" rowspan="2">
<img src="images/map_06.png" width="92" height="69" alt="" /></td>
<td colspan="3" rowspan="2">
<img src="images/map_07.png" width="94" height="69" alt="" /></td>
<td>
<img src="images/map_08.png" width="86" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td rowspan="12">
<img src="images/map_09.png" width="86" height="498" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="68" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<div id="map1">
<div class ="noborder">
<img src='images/map_10.png' alt="" width="93" height="95" usemap=#airmap>
<map name=airmap>
<area shape=Rect Coords=-17,-5,107,109 imgSrc="images/Rt5.png" />
</map>
</div>
</div></td>
<td colspan="2">
<img src="images/map_11.png" width="93" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="10">
<img src="images/map_12.png" width="93" height="429" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="94" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/map_13.png" width="230" height="81" alt="" /></td>
<td colspan="4" rowspan="3">
<img src="images/map_14.png" width="77" height="82" alt="" /></td>
<td colspan="2">
<img src="images/map_15.png" width="43" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="8">
<img src="images/map_16.png" width="43" height="334" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="80" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/map_17.png" width="153" height="84" alt="" /></td>
<td rowspan="2">
<img src="images/map_18.png" width="77" height="84" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img src="images/map_19.png" width="28" height="83" alt="" /></td>
<td rowspan="6">
<img src="images/map_20.png" width="49" height="253" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="83" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/map_21.png" width="119" height="48" alt="" /></td>
<td colspan="4" rowspan="2">
<img src="images/map_22.png" width="112" height="48" alt="" /></td>
<td colspan="2">
<img src="images/map_23.png" width="27" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="images/map_24.png" width="27" height="169" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/map_25.png" width="120" height="62" alt="" /></td>
<td colspan="3">
<img src="images/map_26.png" width="111" height="23" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/map_27.png" width="111" height="99" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img src="images/map_28.png" width="120" height="60" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="60" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="119" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="77" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="49" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="42" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="92" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="86" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="121" height="1" alt="" /></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Hi, I've got a game 99% finished, basically when the game start and the player clicks through to the game panel, there are 30 tiles (80x80px) each, and the object of the game is for the player to press the tile with the letter "X" on, the X can be on any 1 of 5 different coloured tiles at anyone time and of course there can be more than 1 tile having an X on it. The tiles currently are built via .css, and this works 100% perfectly. However now I want to use images, pulled in from my local website instead of tiles built via .css. A demo of what I'm kinda of after is here > Edit fiddle - JSFiddle - if you press "run" the images will keep changing their order. The code I currently have for the game is here.. //CODE// var TheColorArray = ['red', 'yellow', 'green', 'blue', 'orange'], TheScore = 0, TimerLength = 2500, GameTimer, ScoreMap = { 'red': 500, 'yellow': 50, 'green': 30, 'blue': 20, 'orange': 5 }; function DrawRow() { TheColorArray.sort(function () { return .5 - Math.random(); }); var TheHTML = '<div class="row">'; var MagicColumn = Math.floor(Math.random() * 6); for (var i = 0; i < 5; i++) { if (i === MagicColumn) { TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>'; } else { TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>'; } } TheHTML = TheHTML + '</div>'; return TheHTML; } You'll also see that "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>';" and "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>';" both state that if X is pressed the game basically carries on. I need this to use a chosen image from my server, i.e. URL/apple.png .... i have also managed to get to this point (with apples) but its just not working.. Edit fiddle - JSFiddle Any help would be great.. Many thanks in advance!!! Hi there, i've run into a bit of a problem, i've managed to get javascript to change an image when choosing an option from a dropdown menu, but when i try to get it to change multiple images it only ever changes one image... Code: <script type="text/javascript">
function changeWalls(what, whatimg)
{
if(what != "none")
{
document.images[whatimg].src = what;
}
}
</script>
<select name="Walls" onchange="changeWalls(this.value,'walls')">
<option value="images/white.gif" selected="selected">Please Select a Colour</option>
<option value="images/WALLCC.png">Classic Cream</option>
<option value="images/WALLSG.png">Shale Grey</option>
<option value="images/WALLDO.png">Deep Ocean</option>
<option value="images/WALLSM.png">Surfmist</option>
</select>
then the images i want are multiples so i want to change 2 of these Code: <img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls2" /> So this is my first thread and I am a noob at javascript so please forgive obvious mistakes. I am try to make images float across the screen horizontally. Ideally I would like them to come from both sides and be at different y positions. The problem I am having is that I can only seem to get one to move at a time. Another problem is that when they move off to the right of the screen it expands the viewable size of the site. So here's what I've come up with thus far. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
body {
background-color: #0CF;
}
</style>
<script language="javascript">
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1000; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
function moveImage() {
//Keep on moving the image till the target is achieved
if(x<dest_x) x = x + interval;
if(y=dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("cloud").style.top = y+'px';
document.getElementById("cloud").style.left = x+'px';
//if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',100);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="backgroundgradient.png" onload="moveImage()">
<div id="cloud" class="movable">
<img src="cloud01.png" />
</div>
<script language="javascript">
var x = -100; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1500; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
function moveImage01() {
//Keep on moving the image till the target is achieved
if(x<dest_x) x = x + interval;
if(y=dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("plane").style.top = y+'px';
document.getElementById("plane").style.left = x+'px';
//if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage01()',10);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="web_layout/backgroundgradient.png" onload="moveImage01()">
<div id="plane" class="movable">
<img src="plane.png" />
</div>
</body>
</html>
Any help is greatly appreciated. Thanks The code below allows the user to hover over 1 object and it not only replaces the object but also shows an additional object between the buttons. It works great in Firefox, but does not in Internet Explorer. HELP webpage: http://www.isp.ucar.edu/ ------------ standard mouseover commands are used in index.php <CODE> <a href="http://www.tiimes.ucar.edu/beachon/" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')"> <img src="images/buttons/button-beachon.gif" alt="BEACHON" width="181" height="74" border="0" id="img1" /></a> </CODE> ------------ <CODE> if (document.images) { img1on = new Image(); img1on.src = "images/buttons/button-beachon-on.gif"; img1off = new Image(); img1off.src = "images/buttons/button-beachon.gif"; img2on = new Image(); img2on.src = "images/buttons/button-bgs-on.gif"; img2off = new Image(); img2off.src = "images/buttons/button-bgs.gif"; img3on = new Image(); img3on.src = "images/buttons/button-iam-on.gif"; img3off = new Image(); img3off.src = "images/buttons/button-iam.gif"; img4on = new Image(); img4on.src = "images/buttons/button-nvia-on.gif"; img4off = new Image(); img4off.src = "images/buttons/button-nvia.gif"; img5on = new Image(); img5on.src = "images/buttons/button-utls-on.gif"; img5off = new Image(); img5off.src = "images/buttons/button-utls.gif"; img6on = new Image(); img6on.src = "images/buttons/button-water-on.gif"; img6off = new Image(); img6off.src = "images/buttons/button-water.gif"; img7on = new Image(); img7on.src = "images/buttons/button-exploratory-on.gif"; img7off = new Image(); img7off.src = "images/buttons/button-exploratory.gif"; // second image that does not appear in original button space img1ad = new Image(); img1ad.src = "images/buttons/beachon-overview-sm.gif"; img2ad = new Image(); img2ad.src = "images/buttons/bgs-overview-sm.gif"; img3ad = new Image(); img3ad.src = "images/buttons/iam-overview-sm.gif"; img4ad = new Image(); img4ad.src = "images/buttons/nvia-overview-sm.gif"; img5ad = new Image(); img5ad.src = "images/buttons/utls-overview-sm.gif"; img6ad = new Image(); img6ad.src = "images/buttons/water-overview-sm.gif"; img7ad = new Image(); img7ad.src = "images/buttons/exploratory-overview-sm.gif"; } { function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); document["holder"].src = eval(imgName + "ad.src"); } } } function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); document["holder"].src = "images/buttons/isp-overview-sm.gif"; } } </CODE> Hello, I am trying to do an image swap when hovering over "TEXT" links. For instance, I would like to first have a "mainpic" in a div that would be replaced by either image 1,2 or 3 (depending on if you are hovering over"text link 1,2 or 3). I would use normal rollover "image" swaps, but would prefer to have the "trigger" to be "text" (for SEO reasons). I am just getting familiar with javascript, but do not even know where to begin! I have read multiple forum entries throught google, but could not find any where I could have "multiple" text links. I would so much appreciate it if anyone could please point me in a direction. Sincerely, Buffmin Hi Guys im new to javascript but i have got this code so far to work Code: <script type="text/javascript">
function do_something(e)
{
document.getElementById('imgholder') .style.background="transparent url('images/img2.jpg') no-repeat";
}
</script>
and it works with this Code: <div id="flash">
<div id="imgholder">
</div>
<div id="myController2">
<span class="jFlowControl2">No 1 </span>
<span class="jFlowControl2">No 2 </span>
</div>
<div id="mySlides2">
<div>
<a onmouseover="do_something(this)" class="vm" href="#" title="Vulnerability Management"></a>
<a class="grc" href="#" title="grc"></a>
<a class="pci" href="#" title="pci"></a>
<a class="gcs" href="#" title="gcs"></a>
<a class="pt" href="#" title="Penetration Testing"> </a>
<span class="jFlowNext2 NextFlash"> </span>
</div>
<div>
<span class="jFlowPrev2 BackFlash"> </span>
</div>
</div>
</div>
Currently the background changes on the 1st link hover. is it possible to have different images load on the hover of different a's? any help would be appricated |
|||||||