Learn VBA & Macros in 1 Week!

JavaScript - Sending Or Changing Images

Full Excel VBA Course - Beginner to Expert

Sending Or Changing Images	View Content

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.

Full Excel VBA Course - Beginner to Expert

Changing Images On Mouseover

Similar Tutorials

View Content

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!

Changing Images When Links Are Clicked.

Similar Tutorials

View Content

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.

Flickering Images - Changing Opacity

Similar Tutorials

View Content

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.

Changing Multiple Images Onmouseover

Similar Tutorials

View Content

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

Changing Text And Images On Mouseover

Similar Tutorials

View Content

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"/>
<this is where I want changing text to appear as I roll over thumbnails.
 

<img src="i/tb/t0.jpg" class="img" width="70" alt="blah" title="blah"/>

<img src="i/tb/t1.gif" class="img" width="70" alt="blah" title="blah"/>

<img src="i/tb/t2.gif" class="img" width="70" alt="blah" title="blah"/>

<img src="i/tb/t3.gif" class="img" width="70" alt="blah" title="blah"/>

<img src="i/tb/t4.gif" class="img" width="70" alt="blah" title="blah"/>

<img src="i/tb/t5.gif" class="img" width="70" alt="blah" title="blah"/>

<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.

Changing Images And Map On Mouseover Not Working As Expected With Ie

Similar Tutorials

View Content

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

Replace Images On A Page With Other Images?

Similar Tutorials

View Content

Hi there,

I've been searching for an answer to this for the last few days but with no luck, so I thought I'd register here to see if anyone can possibly help.

All I've been able to find everywhere for this is examples of changing images when rolling over them or clicking them, and I don't need that.

What I need is a bit of javascript that will recognise some image paths on a page and replace those image paths with other ones.

It's for an ecommerce website on a certain platform, using a customer reviews section which outputs star images based on the customer's rating. So, the images used (which look awful) are, for example, "sourcehere/stars_5.gif", "sourcehere//stars_4.gif", and so on. Just 5 of them.

I want to design my own 5 images, upload those images, and then have the javascript replace the rubbish looking ones on the page with my own images.

I thought I'd be able to find something quite easily, but so far all I can find is examples of mouseover events and so on, and I don't need any of that, just the entire image replaced with my own image.

Can anyone help please? I'm a beginner with javascript so I'll need it spelled out to me! Thankyou for your time.

Getting Different Bg Images To Scroll Through Own Sets Of Images.

Similar Tutorials

View Content

Hey everyone!

I'm in the process of creating a portfolio site for my artwork and I'm requesting help. The website has a scalable JQuery background which changes depending on which thumbnail you click.

I've uploaded the progress he
http://www.aldousmassie.com/newprogress

I'm using this code at the moment to scroll through the background:

Code:

<!-- SCRIPT FOR CHANGING BG ON CLICK -->

<script type="text/javascript">
					imgs=Array("img/00.jpg","img/01.jpg","img/02.jpg","img/03.jpg");
var x=0;

function change() {
					document.getElementById("bgimg").src=imgs[++x];

if (x==3) {
x=-1;
}
}

if (!imgs[x+1]) {
x=-1;
}
</script>
					
<!-- SCRIPT BELOW OVERWRITES SCRIPT ABOVE -->

<script type="text/javascript">
					imgs=Array("img/08.jpg","img/09.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg");

var x=0;

function change() {
					document.getElementById("bgimg").src=imgs[++x];

if (x==5) {
x=-1;
}

}

if (!imgs[x+1]) {
x=-1;
}
</script>

Unfortunately, the bottom code overwrites the top. Is it possible for each different background image to have their own "set" of images that could be scrolled through onclick?

I'd appreciate any tips that point me in the right direction. Thank you.

Sending A Value To The Database

Similar Tutorials

View Content

seems easy yet frustrating trying to learn how.

i set up a column in the MySql database that holds an integer, lets call it IMG_INDEX; easy enough.

in my prgm.php, i need to use the values stored in IMG_INDEX (in the database) to contol which image is currently displayed in the browser.

i need to be able to update to value of IMG_INDEX in the database from the code.
i need to be able to retrieve the value of IMG_INDEX from the database with the code.

note: this is NOT a user input thing, or a display of database info thing.
i'm using IMG_INDEX as a switch to control which image is displayed at different times during a web browing session.

?? so here is the question ??
how do i send a new integer (like 2) to the database and store it in IMG_INDEX ?
how do i retrieve the value of IMG_INDEX from the database ?
i need to do this all from the javascript area in the head of the php code, and occasionally from the body area of the php code.

if you have a tip, i'd really appreciate your help.

thank you,
Paul Williams

todays weather in Kalispell, MT
COLD
i say again COLD, COLD, COLD. brrrrrrrrrrrr

Sending Text To Another Div

Similar Tutorials

View Content

hello,
can someone please show me why only one of the following functions work.

I have one form with 2 different inputs where the text should at the same time as typing, be automatically be entered into two other divs

thx

Code:

function redundantTextInstall(input,idArr) {
    var i = 0, val = input.value;
    while (idArr[i]) {
        document.getElementById(idArr[i]).innerHTML = val;
        i++;
    }
} 
function installtext(input,idArr) {
    var o = 0, val = input.value;
    while (idArr[o]) {
        document.getElementById(idArr[o]).innerHTML = val;
        o++;
    }
}
window.onload = function () {
    document.someForm.os2.onkeyup = function () {
        var ids = ['addsx1', 'addsx2', 'addsx3', 'addsx4', 'addsx5', 'addsx6', 'addsx7', 'addsx8', 'addsx9', 'addsx10'];
        redundantTextInstall(this,ids);
       };
};


window.onload = function () {
    document.someForm.os3.onkeyup = function () {
        var abs = ['addsA', 'addsB', 'addsC', 'addsD', 'addsE', 'addsF', 'addsG', 'addsH', 'addsI', 'addsJ'];
        installtext(this,abs);

    };
};

Sending Form

Similar Tutorials

View Content

Hi,
I have a script that has a form and i need it to send to an email address.

The send button has an onclick with send() as its action, the js file has a send function but no way of inputting an email address, I though of adding .submit() or .post() jquery items but I am having trouble. Basically the script was given to me as is because there was no need for it and i wanted to get it to work. an suggestions or ideas?

regards!

Help With Sending Some Variables

Similar Tutorials

View Content

Hello to all!

Can I have 2 variables upon one select?

The code below is created dinamicly with php from a database, and displays a dropdown select box, the only thing is that the values: Oliver Franchis, Pedro pastor, Maria China... have unique ID's and when the name is selected I would like the ID allso to be.

Code:

<!-- Populate list with friends  START-->
var newTextbox = document.createElement('select'); 
newTextbox.className = 'fn-select';
newTextbox.name = "opcion";

//First user in the populated select menu is the person Loged in
var op1 = new Option("", "Oliver Franchis");
newTextbox.appendChild(op1);
var txt1 = document.createTextNode('Me | Oliver Franchis');
op1.appendChild(txt1);

//Next users are my friends in the database
 
	var op1 = new Option("", "Pedro pastor"); 
    newTextbox.appendChild(op1);
    var txt1 = document.createTextNode('Pedro pastor');
    op1.appendChild(txt1);
	
	var op1 = new Option("", "Maria China"); 
    newTextbox.appendChild(op1);
    var txt1 = document.createTextNode('Maria China');
    op1.appendChild(txt1);
	
	var op1 = new Option("", "Juan Testing"); 
    newTextbox.appendChild(op1);
    var txt1 = document.createTextNode('Juan Testing');
    op1.appendChild(txt1);
	
	var op1 = new Option("", "Carmen Hernandez"); 
    newTextbox.appendChild(op1);
    var txt1 = document.createTextNode('Carmen Hernandez');
    op1.appendChild(txt1);
	
	var op1 = new Option("", "Eduardo Palote"); 
    newTextbox.appendChild(op1);
    var txt1 = document.createTextNode('Eduardo Pajote');
    op1.appendChild(txt1);
	
editAreaText.appendChild(newTextbox);
editArea.appendChild(editAreaText);
<!-- Populate list with friends  END-->

This is the function on the index.php page:

Code:

function saveNote (note) {
	resetAjax();
	var photoId = note.container.element.id;
	ajax.setVar('action', 'save');
	ajax.setVar('photo_id', photoId);
	ajax.setVar('note_id', note.id);
	ajax.setVar('left', note.rect.left);
	ajax.setVar('top', note.rect.top);
	ajax.setVar('width', note.rect.width);
	ajax.setVar('height', note.rect.height);
	ajax.encVar('text', note.gui.TextBox.value);
             ajax.runAJAX();
	var statusDiv = document.getElementById('PhotoNoteStatus');
	ajax.onCompletion = function () {statusDiv.innerHTML = "<p>Note saved.</p>"; }
	return 1;
}

Sending Keystrokes

Similar Tutorials

View Content

Hi can someone modify this script so the key '1' will send the ENTER command.

It's a script for an app to control my computer from my phone.

So far the middle button and the number 5 send left click. 0 sends the right click.

When you press the left soft key it opens the text input to send to the computer. but as it stands there is no way to then press enter.

If someone could do that for me that would be great. Or at least show me how..

thanks

var leftDown = false;
var rightDown = false;
var leftLocked = false;
var rightLocked = false;
var acceleration_factor = 1;
var widget = CreateKeypadScreen( "myKeypad_" );
widget.title = "Mouse Pointing";
if( theTerminal.supportsPen ) {
widget.CreateRow("Use the blank area like you'd use a trackpad; use up/down to scroll.", scCenter, scWrap, scSmall);
} else {
widget.CreateRow("Use the directional controls.", scCenter, scWrap, scSmall);
}
widget.sendsPenEvents = true;
widget.keyRepeatInterval = 0.001;
widget.keyRepeatDelay = 0.2;
theTerminal.Push(widget);

function myKeypad_Exit(theScreen)
{
if( leftDown ) {
leftDown = false;
SendMouseEvent(0, 0, 0, 1, 0);
}
if( rightDown ) {
rightDown = false;
SendMouseEvent(0, 0, 0, 0, 1);
}
}

function showSearchable()
{
var textField = CreateTextFieldDialog( "textToPrintOnComputer_");

textField.name = "Text to show on computer";
textField.title = "Text to show on computer";
textField.prompt = "Write text to show on computer:";
textField.value = "";
textField.maxLength = 0;

theTerminal.Push(textField);

theTerminal.Push(textField)
}

function textToPrintOnComputer_OK(textField)
{
convertToUnicodeAndSend(textField.value);

}

function convertToUnicodeAndSend(incomingText)
{
var theText = incomingText;
var toUnicode = "";

for(var i=0;i<theText.length;i++)
{
toUnicode = theText.charCodeAt(i);
SendUnicodeKeystroke(toUnicode);
}
}

function myKeypad_KeyDown(theScreen, theKey)
{
if(theKey == "f")
{
showSearchable();
} else if( theKey == "<") {

SendVirtualKeystroke( 0x08, true, false, false, false ) ;

}

//what does this line actually do?
//if( handleKeyMove( theKey ) ) return;

else if( theKey == "s" || theKey == "5" ) {
if( ! leftDown ) {
leftDown = true;
SendMouseEvent(0, 0, 0, -1, 0);
}
if( leftLocked ) {
SendMouseEvent(0, 0, 0, 1, 0);
leftLocked = false;
leftDown = false;
ShowMessage("Left button unlocked");
}
if( rightLocked ) {
SendMouseEvent(0, 0, 0, 1, 0);
rightLocked = false;
rightDown = false;
ShowMessage("Right button unlocked");
}
} else if( theKey == ">" || theKey == "0" ) {

if( ! rightDown ) {
rightDown = true;
SendMouseEvent(0, 0, 0, 0, -1);
}
if( rightLocked ) {
SendMouseEvent(0, 0, 0, 1, 0);
rightLocked = false;
rightDown = false;
ShowMessage("Right button unlocked");
}
if( leftLocked ) {
SendMouseEvent(0, 0, 0, 1, 0);
leftLocked = false;
leftDown = false;
ShowMessage("Left button unlocked");
}
}

}

function myKeypad_KeyRepeat(theScreen, theKey)
{
if( handleKeyMove( theKey ) ) {
acceleration_factor += 0.05;
return;
}
if( theKey == "s" || theKey == "5" ) {
if( leftDown && ! leftLocked ) {
leftLocked = true;
ShowMessage("Left button locked");
}
} else if( theKey == ">" || theKey == "0" ) {
if( rightDown && ! rightLocked ) {
rightLocked = true;
ShowMessage("Right button locked");
}
}
}

function myKeypad_KeyUp(theScreen, theKey)
{
acceleration_factor = 1;
if( theKey == "s" || theKey == "5" ) {
if( leftDown && ! leftLocked ) {
leftDown = false;
SendMouseEvent(0, 0, 0, 1, 0);
}
} else if( theKey == ">" || theKey == "0" ) {
if( rightDown && ! rightLocked ) {
rightDown = false;
SendMouseEvent(0, 0, 0, 0, 1);
}
}
}

function myKeypad_PenTap(theScreen)
{
if( leftLocked ) {
SendMouseEvent(0, 0, 0, 1, 0);
leftLocked = false;
leftDown = false;
ShowMessage("Left button unlocked");
} else {
if( ! leftDown ) {
SendMouseEvent(0, 0, 0, -1, 0);
}
SendMouseEvent(0, 0, 0, 1, 0);
leftDown = false;
}
}

function myKeypad_PenLock(theScreen)
{
if( ! leftDown && ! leftLocked ) {
SendMouseEvent(0, 0, 0, -1, 0);
leftDown = true;
leftLocked = true;
ShowMessage("Left button locked");
}
}

function accelerate(v)
{
if( v > 8 || v < -8 ) {
return v*4
} else if( v > 4 || v < -4 ) {
return v*2
}
return v;
}

function myKeypad_PenMove(theScreen, dx, dy)
{
dx = accelerate(dx);
dy = accelerate(dy);
SendMouseEvent(dx, dy, 0, 0, 0);
}

function handleKeyMove( theKey )
{
var dx = 0;
var dy = 0;
var scroll = 0;

if( theTerminal.supportsPen ) {
if( theKey == ">" || theKey == "6" ) {
dx = 1;
} else if( theKey == "<" || theKey == "4" ) {
dx = -1;
} else if( theKey == "v" || theKey == "d" || theKey == "8" ) {
scroll = -1;
} else if( theKey == "^" || theKey == "u" || theKey == "2" ) {
scroll = 1;
} else if( theKey == "1" ) {
dx = -1;
dy = -1;
} else if( theKey == "3" ) {
dx = 1;
dy = -1;
} else if( theKey == "7" ) {
dx = -1;
dy = 1;
} else if( theKey == "9" ) {
dx = 1;
dy = 1;
} else {
return false;
}
} else {
if( theKey == ">" || theKey == "6" ) {
dx = 1;
} else if( theKey == "<" || theKey == "4" ) {
dx = -1;
} else if( theKey == "v" || theKey == "d" || theKey == "8" ) {
dy = 1;
} else if( theKey == "^" || theKey == "u" || theKey == "2" ) {
dy = -1;
} else if( theKey == "1" ) {
dx = -1;
dy = -1;
} else if( theKey == "3" ) {
dx = 1;
dy = -1;
} else if( theKey == "7" ) {
dx = -1;
dy = 1;
} else if( theKey == "9" ) {
dx = 1;
dy = 1;
} else {
return false;
}
}

if( dx != 0 || dy != 0 ) {
SendMouseEvent(dx*acceleration_factor, dy*acceleration_factor, 0, 0, 0);
}
if( scroll != 0 ) {
SendMouseEvent(0, 0, scroll, 0, 0);
}

return true;
}

Sending Option Value In Php

Similar Tutorials

View Content

HI All,

I am using triple ajax dropdwon in my php file.In my form i have species_scientifc_name & on select I am sending its id to a php file for retriving data for second dependent dropdown box, Here I need to get this id in form action file.
How to get this value, Any idea?

Thnaks in Advance!!

Sending Arrays To Method Help

Similar Tutorials

View Content

I cannot figure out how to return the array back to the main method!
what am I doing wrong??

import java.util.*;

//lab 3

public class Prices
{
public static void main(String[] args)
{
double []array;
array = new double[10];

double fullPrice;

fullPrice = fillPrices(array);

System.out.println("testing");
}

public static double fillPrices(double []tenValues)
{
Scanner input = new Scanner(System.in);
double prices;

System.out.println("Please enter 10 prices: ");

for (int i = 0; i < 10; i++)
tenValues[i] = input.nextDouble();

return tenValues;
}
}

I thought you return an array by simply return (array name);

Am i missing something?

Thanks a bunch for whoever takes the time to help me!

Need Help Sending Forms With Javascript

Similar Tutorials

View Content

Hello,

I need to solve the following task on my website:

I have products with add to cart button, like this:

Code:

<form action="cart.php" method="post" id="_cart" name="_cart">
           <input type="hidden" name="prodid" value="Product1" />
           <a href="javascript: AddToCart()">
<img src="/images/design/buynow.gif" />
</a>
</form>

However, it doesn't work, since i have the same value under the name of each form: "_cart". Is there any way i still can send a form regardless the name of the form?

I tried to use "onclick", like this:

Code:

<a href="javascript: void(0);" onclick="document._cart[0].submit();return
false;">

However, i still have to change the value under the _cart element from 0 to the number of my forms. I need just submit a form itself, with the same form names. For some reason i cannt use the html submit button. Everything should be done with JavaScript.

I beleive this text is not hard for understanding )

Look forward to your help Guys.

Sending An Xml Conetnt Using Ajax

Similar Tutorials

View Content

hi,

My server has an xml configuration file which I want to receive to my browser.
I can do HTTPrequset directly to the file config.xml and get it in the responseXML, but I want to do it im more secure way, so the post request will be to some script ("python" in my case), which will open and read the file.

if my xml file looks like this:
<test>some_data</test>

what shoud be the content of the response?

Xmlhttprequest Post Not Sending

Similar Tutorials

View Content

When I send via GET using XMLHttpRequest to a PHP script then the data is received, but if I do the same with POST then nothing makes it through.

Here's my simple JavaScript function (tested in Firefox only) which works with GET but apparently won't send POST data: Code:

function requestXML(url, post) {
	xml_request = false;
	
    if (window.XMLHttpRequest) {
    	try {
			xml_request = new XMLHttpRequest();
        } catch(e) {
			xml_request = false;
        }
    }
	
	if (xml_request) {
		xml_request.onreadystatechange = processChange;
		
		// Check for POST values.
		if (post) {
			xml_request.open("POST", url, true);
			xml_request.send(post);
		} else {
			xml_request.open("GET", url, true);
			xml_request.send("");
		}
	}
}

It is called like-so with POST: Code:

onClick="requestXML('http://localhost/update.php', this.name + '=' + this.value)"

It is called like-so with GET: Code:

onClick="requestXML('http://localhost/update.php?' + this.name + '=' + this.value)"

The PHP script that responds simply executes print_r($_REQUEST); and the JavaScript function processChange simply displays the output (or an error) in an alert box.

If I send via GET, then the alert box displays the values sent. With POST, the alert box is empty.

Any ideas what might be gumming up the works?

Ck Editor Not Sending Rich Html

Similar Tutorials

View Content

Hello,

I am having a bit of a problem sending rich html emails. I just installed CK Editor on my hosting account and it appears to be working fine. But instead large colored fonts, I'm getting html tags only in my email. Links and emails appear to be working fine, though...

So instead looking like this: Big Bold Blue.

It looks like this: Big Bold Blue.

I also tried using mail() function in php, on its own, but that didn't work either. Can anyone help me out with this? I'm not very familiar with JavaScript...

Thanks in advance!

Sending A Variable To A Js Function - Not Working

Similar Tutorials

View Content

Hey All,

I've been fighting this one for a few months now, and it is causing me to have to create multiple functions that basically do the same thing. I am using the three functions below to replace text between two div tags on a page, based on a link that is clicked:

Code:

<td><a href=\"javascript:void(0)\" onclick=\"htmlData('ajax/loginContent.php', 'view=1','data=2','displayField=txtResult')\">Active Jobs</a></td>\n";

Then further down the page:
Code:

<div id="txtResult">replace this content</div>

For some reason, I CANNOT send the div id name as a js variable. When I do it errors out. BUT if I replace displayField in the js functions below with "txtResult" it works fine. I am fairly new to js, so it is definitely possible that I am doing something incorrectly. Anyone have any ideas for me?

Code:

function GetXmlHttpObject(handler) {   
   var objXMLHttp=null  
   if (window.XMLHttpRequest)   
   {   
       objXMLHttp=new XMLHttpRequest()   
   }   
   else if (window.ActiveXObject)   
   {   
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")   
   }   
   return objXMLHttp   
}   
  
function stateChanged(displayField){
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")   
   {   
           document.getElementById(displayField).innerHTML= xmlHttp.responseText;   
   }   
   else {   
           //alert(xmlHttp.status);   
   }   
}   
  
// Will populate data based on input   
function htmlData(url, qStr, qStr2,displayField){
   if (url.length==0)   
   {   
       document.getElementById(displayField).innerHTML="";   
       return;   
   }   
   xmlHttp=GetXmlHttpObject()   
   if (xmlHttp==null)   
   {   
       alert ("Browser does not support HTTP Request");   
       return;   
   }   
  
   url=url+"?"+qStr; 
   if(qStr2)
     url=url+"&"+qStr2;  
   url=url+"&sid="+Math.random();   

   xmlHttp.onreadystatechange=stateChanged(displayField);   
   xmlHttp.open("GET",url,true) ;   
   xmlHttp.send(null);   
}