JavaScript - Dynamically Resizing + Random Background Image

Looking for a way to have background music play automatically when my site loads, with the music being randomly picked from a list of several songs.. So each time the page loads, a different song should play.. Can be JavaScript or Flash, whichever way works the best.. Any ideas?

I'm coding my new website, and to save bandwidth, i'm letting users link to their own avatars, so I want to resize any images over 150px wide so it doesn't mess up my layout - simple, right? Well, you'd think so, but I don't know any javascript, so i've scrapped this together with what little I know:

Code:

var obj=document.getElementsByTagName("img");
	for(var i=0;i<obj.length;i++){
		if(obj[i].className == "avatar") {
			if(getElementWidth(obj[i]) > 150) {
				obj[i].style.width = 150;
			}
		}
	}

Can anyone help me fix that or code me a new one please? I need it to check all elements (well, images - but only images will be using it) for a width of over 150px, and, if it is - change it to 150px

I know it's pretty simple but it's hurting my head! :P

Thanks in advance
-Alux

Im using the below javascript to resize images on a forum I have created but I want it to ignore 2 certain images that are part of my header.

Heres the code

Code:

<script>
     window.onload = resizeimg;
    function resizeimg()
    {
       if (document.getElementsByTagName)
       {
          for (i=0; i<document.getElementsByTagName('img').length; i++)
          {
             im = document.getElementsByTagName('img')[i];
             if (im.width > 600)
             {
                im.style.width = '600px';
                eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + "','phpbbegypt ','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")");
                eval("im.onclick = pop" + String(i) + ";");
                if (document.all) im.style.cursor = 'hand';
                if (!document.all) im.style.cursor = 'pointer';
                im.title = 'Click Here To See Image Full Size ';
             }
          }
       }
    }

    </script>

But I want it to ignore 2 images..and not resize them.

head1.jpg
head2.jpg


Any help would be gratefully recieved !! Cheers !!

can you explain someone step by this code?i didn't get it.

<script language="Javascript">



<!--





function backcolor(form){

temp = ""

for (var i = 0; i < 16; i++) {

temp = form.color[i].value

if (form.color[i].checked){ document.bgColor = temp }

}

}



function randombackground(){



document.bgColor = getColor()



}



function getColor(){



currentdate = new Date()

backgroundcolor = currentdate.getSeconds()



if (backgroundcolor > 44)

backgroundcolor = backgroundcolor - 45

else if (backgroundcolor > 29)

backgroundcolor = backgroundcolor - 30

else if (backgroundcolor > 15)

backgroundcolor = backgroundcolor - 16



if (backgroundcolor == 0 )

return "olive";

else if (backgroundcolor == 1 )

return "teal";

else if (backgroundcolor == 2 )

return "red";

else if (backgroundcolor == 3 )

return "blue";

else if (backgroundcolor == 4 )

return "maroon";

else if (backgroundcolor == 5 )

return "navy";

else if (backgroundcolor == 6 )

return "lime";

else if (backgroundcolor == 7 )

return "fuschia";

else if (backgroundcolor == 8 )

return "green";

else if (backgroundcolor == 9 )

return "purple";

else if (backgroundcolor == 10 )

return "gray";

else if (backgroundcolor == 11 )

return "yellow";

else if (backgroundcolor == 12 )

return "aqua";

else if (backgroundcolor == 13 )

return "black";

else if (backgroundcolor == 14 )

return "white";

else if (backgroundcolor == 15 )

return "silver";

}



// -->



</script>

Hi there,
I just recently took over a site that has some java code on it I'm unfamiliar with. If you go to smalltowngossipmusic.com, you'll see what this code does. Go to the pages "Sounds" or "Travel", and once your mouse leaves the main image at the top of the page, you should see those pages shrink. This is some code that was implemented on the site (which is wordpress) in the header.php template. Here is the code:

Code:

<script type="text/javascript">
/* <![CDATA[ */
var $ = jQuery.noConflict();
$(document).ready(function () {
	headerImage();
});

var speed = 500;
var origMT = 0, origHeight = '120px';
function expandHeader(obj) {
	$('.headerImage').animate({height: '436px'},speed);
	$('.headerImage img').animate({'margin-top': '-2px'},speed);
}
function shrinkHeader(obj) {
	$('.headerImage').stop().animate({'height': origHeight},speed);
	$('.headerImage img').stop().animate({'margin-top': origMT},speed);
}
function headerImage() {
	origMT = $('.headerImage img').css('margin-top');
	origHeight = $('.headerImage').css('height');
  $('.headerImage img').css('margin-top','0');
	$('.headerImage').css('height','436px');
	setTimeout(shrinkHeader,speed*2);
	$('.headerImage').hover(expandHeader, shrinkHeader);
}

/* ]]> */
</script>

If you look at the page source for each page, you'll see that there is nothing out of whack (at least, not that I can find). However, for some reason, this shrinking script only works on the two pages I mentioned - on every other page, it either doesn't work at all, or it only works about half-way. I have made sure the page.php and header.php templates both have accurate picture information in them, and can not find anything wrong anywhere.

Is there any advice anyone here can give me on how to fix this? I've been doing html and css for awhile, but am relatively new to javascript and php, so am a bit out of my element on this.

I'm willing to post any more code, snippets, whatever needed, just let me know what you need if you think you can help.

Thanks,
Brandon

I am trying to dynamically resize an image. Here is my code:
Code:

<img border="0" src="images/right.gif" width="16" height="100" name="right">

<SCRIPT Language=Javascript> 
<!--
function ChangeImgSize(){
right.height = 3000;
}
ChangeImgSize()
//--> 
</SCRIPT>

This is on an asp page, and the <script> tag is the last thing on the page before </body>

The image does not get resized. I've been testing the page on current browsers (IE 8, Firefox, Chrome). I'm certain I'm doing something newbish, I don't really know Javascript all that well.

Thanks in advance,

Skip

Found this random background img code that works great:



Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script  type="text/javascript">
		function changeImg(imgNumber)	{
			var myImages = ["images/image0.jpg", "images/image1.jpg", "images/image2.jpg", "images/image3.jpg"]; 
			var imgShown = document.body.style.backgroundImage;
			var newImgNumber =Math.floor(Math.random()*myImages.length);
			document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
		}
		window.onload=changeImg;
	</script>
	<style type="text/css">
		.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:0% 0%;}

	</style>
</head>
<body class="bg">
	<p>Some text</p>
	<!-- put a lot text lines here to see that the background stays fixed. -->
	<p>Some text</p>
</body>

The only problem i have is making the background image width and height 100% so that the entire image fills in the screen and fills in on resize of window. Please Help...thanks in advance

Brand new to the forum, so first off... Hello all!!

I have been working on a project which randomly changes the text font of a word submitted (Color and Size). At present the code works fine, using the below Javascript.

Code:

<SCRIPT LANGUAGE="JavaScript">

function randomise(){
var words=document.myform.wordlist.value;
var spacer="";
words=words.split(document.myform.randomiseby.value)
document.myform.code.value=" ";
var colourscheme=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
for(var time=0;time<=(words.length-1);time++){
{var c1=Math.round(Math.random()*(colourscheme.length-1));
var c2=Math.round(Math.random()*(colourscheme.length-1));
var c3=Math.round(Math.random()*(colourscheme.length-1));
var c4=Math.round(Math.random()*(colourscheme.length-1));
var c5=Math.round(Math.random()*(colourscheme.length-1));
var c6=Math.round(Math.random()*(colourscheme.length-1));
var size=1+Math.round(Math.random()*6);
document.myform.code.value+="<font color=\"#"+colourscheme[c1]+colourscheme[c2]+colourscheme[c3]+colourscheme[c4]+colourscheme[c5]+colourscheme[c6]+"\" size=\""+size+"\">"+words[time]+"</font>"+spacer+" ";
}
}
looks_like.innerHTML=document.myform.code.value;
}
</script>

To really highlight the text i would like to keep the font white and change the background colour but i don't have a clue how to do it...

Please note: i am a complete noob to Javascript and the above code has been bodged together from a number of tutorials.

Can anyone help?

Hello all;

I am trying to load four images into a canvas using an array. The images load fine and all, however they are resizing weird. I haven't specified what I want them to resize to, as the actual image are already the sizes I want. However when loaded into the canvas they are sizing differently then their actual sizes. Even when I specify their actual size in the code, they still resize weirdly. Here is my code:

Code:

<body> 
    <canvas id="worldscreen" class="map"></canvas><br  />

<script type="text/javascript">  
    function loadImages(arrow, call) {
    var images = {};
    var loaded = 0;
    var num = 0;
    for (var src in arrow) {
        num++;
    }
    for (var src in arrow) {
        images[src] = new Image();
        images[src].onload = function(){
            if (++loaded >= num) {
                call(images);
            }
        };
        images[src].src = arrow[src];
    }
}
 
window.onload = function(images) {
    var canvas = document.getElementById("worldscreen").getContext("2d");
 
    var arrow = {
        top: "sideQUEST/images/arrow-top.png",
		right: "sideQUEST/images/arrow-right.png",
		bottom: "sideQUEST/images/arrow-bottom.png",
        left: "sideQUEST/images/arrow-left.png",
    };
 
    loadImages(arrow, function(images) {
        canvas.drawImage(images.top, 100, 18);
		canvas.drawImage(images.right, 215, 36);
		canvas.drawImage(images.bottom, 100, 115);
        canvas.drawImage(images.left, 36, 36);
    });
};
</script>
</body>

You can see the code in action he http://myrmidon16.x10.mx/test.php. This is very frustrating and if you have any suggestions it would be greatly appreciated. Thank you.

Here's what I usually use and have been using for years and it works great, just not for this particular purpose. I don't have a clue when it comes to javascript.

Code:

<noscript><img src="no_script_quote.gif" width="406" height="94"/></noscript><script language="javascript">

var delay=6000
var curindex=0

var images=new Array()

	images[0]="quote1.gif"
	images[1]="quote2.gif"
	images[2]="quote3.gif"
	images[3]="quote4.gif"
	images[4]="quote5.gif"

var preload=new Array()

for (n=0;n<images.length;n++)
{
	preload[n]=new Image()
	preload[n].src=images[n]
}

document.write('<img name="defaultimage" src="'+images[Math.floor(Math.random()*(images.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(images.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

	document.images.defaultimage.src=images[curindex]
}

setInterval("rotateimage()",delay)
</script>

But, now I want to be able to set a default picture to be shown first and have the random pics appear next. I also don't want the default pic to show up again in the random array. So basically, every time the page was first visited, or refreshed it would show the default picture then move into the random pics.

Is there anyway to modify the code that I'm using to accomplish this? Or... Any help would be appreciated.

Thanks,
Dell

Hey folks..

Hope you can help, I'm completely new to this and have no knowledge at all when it comes to javascript. Have been using this script on my site for a while. Is there anyway I can add a URL link to the images that are in my selector? When clicked would go to that page on my website.

Thanks in advance of any help

Nat


<script language="JavaScript">

/*
Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
For this script and more, visit http://www.javascriptkit.com
*/

var delay=10000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

randomimages[0]="http://www.anywebsite.com/images/splash1.jpg"
randomimages[1]="http://www.anywebsite.com/images/splash2.jpg"
randomimages[2]="http://www.anywebsite.com/images/splash3.jpg"
randomimages[3]="http://www.anywebsite.com/images/splash4.jpg"
randomimages[4]="http://www.anywebsite.com/images/splash5.jpg"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

Hi,

I have the following function to dynamically create an image (in this case a toolbox button):

Code:

function createButton(srcid,bttn)
{
 if (bttn=='mag') {s='Magnify';h='Magnify';o='DoZoom(event,\'0\',\''+srcid+'\')';}
 if (bttn=='frz') {s='Pause';h='Freeze/Unfreeze';o='setPicture(\''+srcid+'\',0)';}
 if (bttn=='swp') {s='Swap';h='Swap maps';o='setPicture(\''+srcid+'\',2)';}
 btn=document.createElement('img');
 btn.setAttribute('src','toolbox/'+s+'.gif');
 btn.setAttribute('width','16px');
 btn.setAttribute('height','16px');
 btn.setAttribute('id',bttn+'btn_'+srcid);
 btn.setAttribute('class','button');
 btn.setAttribute('name','Toolbox');
 btn.setAttribute('title',h);
 btn.setAttribute('onclick',o);
 document.getElementById('ctrlDiv').appendChild(btn);
}

which works fine in IE8 and IE9, but in IE7 it refuses to pick up the style 'button'. I've even tried putting in btn.class='button' but JS throws up an error.
If I specify the style by btn.style.position='Absolute' it picks this up OK. However, it won't respond to the onclick event either.
I have heard that setAttribute is buggy with IE7, which is why I tried to specify each attribute directly.

The style sheet for class button is:
Code:

.button
{
 position: absolute;
 left: 5;
 top: 5;
 z-index: 1;
}

(BTW, no link to a website as this is local on my machine atm)

TIA,

Gerald.

I am making my first mobile website and need to put wallpapers in it. I cant make every picture in all resolution for each mobile. I found this website which can auto- resize image when user select their mobile brand...i have tried to learn it from page source but failed. Can any one help me please, m newbie xD

here is the website: http://cartoonized.net/cellphone-wallpaper.ph

http://www.javascriptkit.com/javatut...rnalphp2.shtml


Anyone have a decent way of adding a fade affect to this script?