Learn VBA & Macros in 1 Week!

JavaScript - Dynamically Upload Background Image

Full Excel VBA Course - Beginner to Expert

Dynamically Upload Background Image	View Content

I am creating a website and there is an option for the user (after he login to the website, he enters into his workspace page)to upload a background image of his choice to his workspace page.

Can the user dynamically upload a background image to his webpage?

Can this be done in javascript/php?
I would be glad if somebody could help me.

Full Excel VBA Course - Beginner to Expert

Dynamically Resizing + Random Background Image

Similar Tutorials

View Content

Hi CodingForum!

For my website, I have a working script that changes the background image of my website every time it is reloaded. However, I would also like the image to dynamically resize as the user resizes the browser window.

here is a code snippet:

Code:

<head>
<script type="text/JavaScript">
/*<![CDATA[*/var el="bgImg";var bgimg=new Array("../00home/06home.jpg","../00home/07home.jpg");var random=Math.round((bgimg.length-1)*Math.random());var cssStr="#"+el+" { background: url("+bgimg[random]+") no-repeat center } ";var style=document.createElement("style");style.setAttribute("type","text/css");if(style.styleSheet){style.styleSheet.cssText=cssStr;}else{var cssText=document.createTextNode(cssStr);style.appendChild(cssText);}document.getElementsByTagName("head")[0].appendChild(style);/*]]>*/
</script>

<style type="text/css">
.rotatebg {
	z-index:0;
	position:fixed;
	top:0; left:0;
	width:1378px; height:1178px;
	background-repeat: no-repeat;
	background-position:inherit;
	overflow:hidden;
}
</style>
</head

<body>
<div  class="rotatebg" id="bgImg" style="width:100%; height:100%" ></div>
</body>

Does anyone know how I can augment/alter this coded setup to enable the randomly loaded background image to proportionately fill the browser window?

Getting Ie7 To Dynamically Create An Image

Similar Tutorials

View Content

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.

Javascript Help Needed For Category Image Display And Delete Dynamically

Similar Tutorials

View Content

I have search for about a week and still no luck.
I need to dynamically display mutliple images using javascript, no hardcoding. The images have different categories. For ex. bellTower01.jpg, bellTower02.jpg...and fountain01.jpg, fountain02.jpg....

-Use JavaScript to display several images and scroll through them
To display multiple thumbnails, arrange them into a small quantity (no more than 8 per page)
Provide pagination

I really really really need help. I have never done javascript before, so I'm still learning. I seriously checked out many threads and links but nothing works or is what I want. I hope someone can help me out and hopefully also allow me to become better at coding this kind of stuff.

I am not allowed to code in php for this project. I can only use javascript to display the images. Also, I don't really need anything fancy, like slideshows or rotations, I just the image to appear when I select that specific category. I want to get the images from my folder/directory.

Right now, I have it working as it just being hardcoded.
Below is my code for my galleries page:

<?php

//creates a session..initializes session data
session_start ();

echo("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scenes of Purdue</title>

<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/lightbox.css"/>

</head>

<body>
<div id="shadowContainer">
<div id="mainContainer">
<div id="mainHeader"></div>
<div id="topNav">
<ul>

<li><a href="index.php">Home</a></li>
<li><a href="galleries.php">Galleries</a></li>
</ul>
</div><div id="content">
<br />
<div class="clearfix"><h1>Select a Category to View</h1>
<br />

<div class="paginationBar" id="paginationBar">
<select id="catDropDown" onchange="javascript:getCategory()">
<option value="-" selected="selected">Select a Category</option>
<option value="bellTower">Bell Tower</option>
<option value="fountain">Fountain</option>
</select>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br />

<ul id="pagination">
</ul>

<div id="r1c1"></div>
<div id="r1c2"></div>
<div id="r1c3"></div>

<div id="r2c1"></div>
<div id="r2c2"></div>
<div id="r2c3"></div>

<script type="text/javascript">
</script>

</div>
</div>
</div>
<div id="footer"><a href="readme.php">Readme</a><br />
<div class="clearfix">
<div style="float: left"><a href="adminLogin.php" title="Admin Login" class="adminLoginAjax">Admin login</a></div>

</div>
</div>
</div>

</div>

</body>
</html>

Using Dynamically Populating A Javascript Image Slideshow- Fade Effect?

Similar Tutorials

View Content

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

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

Image Upload

Similar Tutorials

View Content

Okay so i followed a tutorial on how to create a wysiwyg rich text editor. The script has a function that makes it possible to take an image uploaded on an another site and use it. What i want though is to let the user upload an image directly into the text editor. Is there a way to do that in javascript? and if so, can you guys please help me write it, cause i can't find anything on the web about it... ?

btw, is it possible to write a function that allows the user to show a video from youtube just by entering the url address?

Code:

<div id="content">
      
<body onLoad="iFrameOn();">
      
<h1>Create a New Guide</h1>
<form id="form1" name="form1" method="post" action="add_guide.php">
<h3>Guide Name <input name="guide" type="text" id="guide" size="50" maxlength="50" /></h3>
<p>&nbsp;</p>
<p>&nbsp;</p>
<select name="class">
  <option value="0">None</option>
  <option value="1">Scout</option>
  <option value="2">Soldier</option>
  <option value="3">Pyro</option>
  <option value="4">Demoman</option>
  <option value="5">Heavy</option>
  <option value="6">Engineer</option>
  <option value="7">Medic</option>
  <option value="8">Sniper</option>
  <option value="9"selected="selected">Spy</option>
</select>

<p>&nbsp;</p>

<div id="wysiwyg_cp" style="padding:8px; width:700px;">
  <input type="button" onClick="iBold()" value="B"> 
  <input type="button" onClick="iUnderline()" value="U">
  <input type="button" onClick="iItalic()" value="I">
  <input type="button" onClick="iFontSize()" value="Text Size">
  <input type="button" onClick="iForeColor()" value="Text Color">
  <input type="button" onClick="iHorizontalRule()" value="HR">
  <input type="button" onClick="iUnorderedList()" value="UL">
  <input type="button" onClick="iOrderedList()" value="OL">
  <input type="button" onClick="iLink()" value="Link">
  <input type="button" onClick="iUnLink()" value="UnLink">
  <input type="button" onClick="iImage()" value="Image">
</div>
<!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it -->
<textarea style="display:none" name="content" cols="50" rows="10" id="content"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>
<!-- End replacing your normal textarea -->


<p>&nbsp;</p>
<input type="submit" name="submit" value="Submit" onClick="javascript:submit_form();" />

</form>
</div>

Code:

function iFrameOn(){
	richTextField.document.designMode = 'On';
}
function iBold(){
	richTextField.document.execCommand('bold',false,null); 
}
function iUnderline(){
	richTextField.document.execCommand('underline',false,null);
}
function iItalic(){
	richTextField.document.execCommand('italic',false,null); 
}
function iFontSize(){
	var size = prompt('Enter a size 1 - 7', '');
	richTextField.document.execCommand('FontSize',false,size);
}
function iForeColor(){
	var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
	richTextField.document.execCommand('ForeColor',false,color);
}
function iHorizontalRule(){
	richTextField.document.execCommand('inserthorizontalrule',false,null);
}
function iUnorderedList(){
	richTextField.document.execCommand("InsertOrderedList", false,"newOL");
}
function iOrderedList(){
	richTextField.document.execCommand("InsertUnorderedList", false,"newUL");
}
function iLink(){
	var linkURL = prompt("Enter the URL for this link:", "http://"); 
	richTextField.document.execCommand("CreateLink", false, linkURL);
}
function iUnLink(){
	richTextField.document.execCommand("Unlink", false, null);
}
function iImage(){
	var imgSrc = prompt('Enter image location', '');
    if(imgSrc != null){
        richTextField.document.execCommand('insertimage', false, imgSrc); 
    }
}
function submit_form(){
	var theForm = document.getElementById("form1");
	theForm.elements["content"].value = window.frames['richTextField'].document.body.innerHTML;
	theForm.submit();
}

Image Preview Before Upload

Similar Tutorials

View Content

when client uploads any image at that time before uploading the image i want to display that image to the client.

so please provide me the snippet of javascript to achieve this thing.

Code:

<img id="previewField" name="previewField" width="100" height="100" />

<input type="file" id="picField" onchange="document.previewField.src=this.value;">

but i am not able to preview this image on mozilla so please provide me the solution for this
or if it it possible using ajax then also please provide the solution.

the altimate goal is: the local image which is suppose to be uploaded should first be previewed to the client or uploder.

Image Upload With Preview And Delete

Similar Tutorials

View Content

Have the followig questions and need answers regarding the following script that will Preview a Photo before upload. The script is from http://jsbin.com/uboqu3/edit#javascript,html

1) The script works for Firefox, no good for IE. How to make it works for IE?

2) It does not have a method to delete the photo. Needs something like a small image "X" installed on the Preview Photo, clicking this "X" will delete the photo. Can anyone supply this solution?

Code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
	if (input.files && input.files[0]) {
		var reader = new FileReader();

		reader.onload = function (e) {
			$('#img_prev')
			.attr('src', e.target.result)
			.height(200);
		};

		reader.readAsDataURL(input.files[0]);
	}
}
</script>

<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>

Help Adding Validation For Image Upload Field

Similar Tutorials

View Content

Hello Everyone,

I need to add some sort of validation that will only allow users to upload .jpg files. I really need to add this to an existing script I've already written. I've seen scripts and tutorials that add the jpg validation but only incorporate the image field of the form. I need the script to validate several forms in the field, not just one. When I try to add validation for the jpg field to the follow script everything stops working. Can someone please point me in the right direction? Thanks!

Code:

<form id="uploadForm" method=post class="upload" action=submit_script.php enctype='multipart/form-data' onsubmit="return validate_form(this)">
		<p><b>First Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_first" size="40"></p>

		<p><b>Last Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_last" size="40"></p>

		<p><b>School Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_school" size="40"></p>

		<p><b>Your School E-Mail</b><font class="super">1</font><br/>
		<INPUT TYPE="TEXT" NAME="school_email" size="40"></p>

		<p><b>Your File</b><font class="super">4,5</font><br/>
		<input id="userfile1" name="userfile1" type="file" size="30"></p>
	
		<p><input name="upload" type="submit" class="box" id="upload" value="Submit Your Poster" onClick="YAHOO.example.container.wait.show();"></p>
	</form>

Code:

function validate_required_field(field,alertText) {
	with (field) {
		if (value==null||value=="") {
            YAHOO.example.container.wait.hide();
			alert(alertText);
	  		return false;
		}
		else {
			return true;
		}
	}
}


function validate_email(field,alertText)
{
	with (field) {
		apos=value.indexOf("@");
		dotpos=value.lastIndexOf(".");
		if (apos<1||dotpos-apos<2) {
            YAHOO.example.container.wait.hide();
			alert(alertText);
			return false;
		}
		else {
			return true;
		}
	}
}


function validate_form(thisform) {
	with (thisform) {
		if (validate_required_field(name_first,"Please enter a value in the 'First Name' field before continuing")==false) {
			name_first.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(name_last,"Please enter a value in the 'Last Name' field before continuing")==false) {
			name_last.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(name_school,"Please enter a value in the 'School Name' field before continuing")==false) {
			name_school.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(school_email,"Please enter a value in the 'School Email' field before continuing")==false) {
			school_email.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_email(school_email,"Please enter a valid email address before continuing")==false) {
			school_email.focus();
			return false
		}
	}
}

Any Ideas Were I Can Get This Background Image Js?

Similar Tutorials

View Content

Hi all,

I was wondering if anyone knew were I can get a javascript that will adjust the background image dependant on the users screen resolution like whats used on this site http://gregorywood.co.uk/journal/chilli-babies

Thanks in advance!!
Kyle

Tb Background Image Slides

Similar Tutorials

View Content

Im going nuts with this, first im starting of by just putting a background image in the tb using JavaScript, but it won't work!

Heres what i got

in my 'name.js' file i got

var name=new Array()
name='name.jpg'

and in my HTML i got

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div>
<table>
<script type="text/javascript" language="JavaScript" src="name.js">
document.write('<td id="name2" background="' + name + '">');
</script>
</td>
</table>
</div>
</body>
</html>

Where have a gone wrong??

If I type Hello World into the name.js file and put it in a tb it works fine, im confused

thanks,
Paul

Background Image In Canvas

Similar Tutorials

View Content

I found a great little starfield script made with javascript and canvas3d.
however i can't for the life of me figure out how to implement a background image inside the canvas. is there some command that tells it to use some feature of canvas, that if otherwise not called, won't allow normal graphics? his whole starfield is generated with a search engine form , and appears to just use a text period to represent stars. here's a link to his script:
http://seb.ly/demos/canvas3d/canvas3d2.html

how do i get a background image in that? or is it impossible?

i tried putting it in the body tag, but it just flashed the background image on the screen for a half a second and then went back to showing only the black background. i tried removing the background body color and replacing it with only background-image ccs, same problem. i tried div positioning it, but the div just covered up the starfield.

Draggable Background Image

Similar Tutorials

View Content

I am trying to recreate this functionality on my website where you can drag a background image around and when you get ot the edges of the image it bounces back to the edge of that corrosponding side. have a look at the site in question - http://irrland.sonntagskunst.de/#

so far i have recreated the top left and right edges using
Code:

var window_width = $(window).width();
    var window_height = $(document).height();
    var image_height = $("#background").height(); (2914px)
    var image_width = $("#background").width(); (3920px)


    $("#background").draggable({
        scroll: false,
        stop: function (event, ui) {
            var animate_to = {};
            var window_width_resized = $(window).width();

            if (ui.position.left > 0) {
                animate_to.left = '0px';
            }
            if (ui.position.top > 0) {
                animate_to.top = '0px';
            }

            //initial size for width
            var image_width_gap = window_width - (image_width + ui.position.left);
            if (image_width_gap > 0) {
                animate_to.left = (0 - (image_width - window_width)) + 'px';
            }

            //after window gets resized for width
            var image_width_gap_resized = window_width_resized - (image_width + ui.position.left);
            if (image_width_gap_resized > 0) {
                animate_to.left = (0 - (image_width - window_width_resized)) + 'px';
            }


$("#background").animate(animate_to, { duration: 1000, easing: "easeOutElastic" });

then i am using the same logic to do the bottom edge but it doesnt work any ideas

here is how i thought the bottom would work

Code:

//initial size for height
            var image_height_gap = window_height - (image_height + ui.position.top);
            if (image_height_gap > 0) {
//                animate_to.top = (0 - (image_height - window_height)) + 'px';
            }

help would be greatly appreciated

fixed.. my bg image was infact smaller

Rotating Background Image Help

Similar Tutorials

View Content

Hey, everyone! I found this script that works great for what it's for. However, I would like to use it for background images. Can someone tell me how to adjust this script so it can be used for backgrounds? Thanks in advance!

Web Page Code Code:

<html>

<head>

<title>slayeroffice | code | image cross fade redux</title>

<link rel="stylesheet" type="text/css" href="xfade2_o.css">

<script type="text/javascript" src="xfade2.js"></script>

</head>

</div>
<body background="id=imageContainer">

<div id="imageContainer">

<img src="http://slayeroffice.com/code/imageCrossFade/img1.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img2.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img3.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img4.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img5.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img6.jpg">

</div>

</body>
</html>

Style Sheet 1 Code:

#imageContainer {
	height:309px;
}

#imageContainer img {
	display:none;
	position:absolute;
	top:0; left:0;
}

Style Sheet 2 Code:

#imageContainer {
	position:relative;
	margin:auto;
	width:500px;
	border:1px solid #000;
}

JavaScript Code:

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
	if(!d.getElementById || !d.createElement)return;

	css = d.createElement("link");
	css.setAttribute("href","xfade2.css");
	css.setAttribute("rel","stylesheet");
	css.setAttribute("type","text/css");
	d.getElementsByTagName("head")[0].appendChild(css);

	imgs = d.getElementById("imageContainer").getElementsByTagName("img");
	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = "block";
	imgs[0].xOpacity = .99;
	
	setTimeout(so_xfade,1000);
}

function so_xfade() {
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;

	nOpacity = imgs[nIndex].xOpacity;
	
	cOpacity-=.05; 
	nOpacity+=.05;
	
	imgs[nIndex].style.display = "block";
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;
	
	setOpacity(imgs[current]); 
	setOpacity(imgs[nIndex]);
	
	if(cOpacity<=0) {
		imgs[current].style.display = "none";
		current = nIndex;
		setTimeout(so_xfade,1000);
	} else {
		setTimeout(so_xfade,50);
	}
	
	function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}
	
}

Set Background Image According To Screen Res

Similar Tutorials

View Content

Hi Guys,

I would like to be able to change my webpage background image according to the screen resolution the user uses so:

if screen resolution is greater than or equals to 1200*600 then background = mybackground.jpg no-repeat

else

background = #000000

THANKS A MILLION!

Random Background Image

Similar Tutorials

View Content

I have 3 background images, and 1 is picked at random to be the background image of the body when loading the page.My code is below. Right now it's just white, can't get any pictures to load. I have checked the URLs and they are correct. Can someone help out?

Here is my code in the header:
Code:

<script type="text/javascript">
function getBackground(){
            
                var bgimg = new Array();
                bgimg[0] = "background1";
                bgimg[1] = "background2";
                bgimg[2] = "background3";
                
                var random = Math.floor(Math.random() * bgimg.length);
                var imgurl = bgimg[random];
                document.body.style.backgroundImage = 'url(' + imgurl + ')';
            }
        </script>

body:
Code:

<body onload="getBackground()">

Preload An Image To Use It As Css Background?

Similar Tutorials

View Content

I want to use an image as a CSS background-image so I used the Image constructor to load the image:
Code:

(new Image()).src="http://www.mediafire.com/imgbnc.php/432b35f2cc3340ea03d25128ada294476c92189353679dfb7e9cc9dfde6498f06g.jpg";

but I noticed that the browser (Firefox) load the image from the URL and not from the memory when changing the background-image property (it takes about 1.5 seconds before showing the image, and every time I reload the page!)

Changing Background Image.

Similar Tutorials

View Content

After you click on the last button 3 times it should change the background to the zombies image however it isn't working. I haven't found tutorials for doing it exactly as I am attempting it but I don't see why this isn't working. It runs through the code just fine and the button works as intended except for the fact that the background image isn't changing. I am still pretty new to JavaScript however so I feel I may just being calling the image incorrectly.

Code:

<html>
<title>Welcome :D</title>
<head>

    <style type="text/css">
	body {
		background-color:E6E6E6;	
	}
    </style>
	<script type="text/javascript">
	//Pre loading images to be used with check boxes.
	function preLoad(){
	Eyeball= new Image(400,200)
	Eyeball.src = "Eyeball.jpg"

	Smileys = new Image(400,200)
	Smileys.src = "Smileys.gif"

	goodAfternoon = new Image(400,200)
	goodAfternoon.src = "Good Afternoon.gif"
	
	goodAfternoonFinal = new Image(400,200)
	goodAfternoonFinal.src = "Good Afternoon.gif"
	
	zombies=new Image()
	zombies.src = "Zombies.jpg"
	
	}
	
	function validate(){
		if(document.getElementById("cb1").checked){
		document.goodAfternoon.src=Eyeball.src;
		}else{
		document.goodAfternoon.src=Smileys.src;
		}
	}
	function reset(){
		cb1.checked=false;
		document.goodAfternoon.src=goodAfternoonFinal.src; 
	}
	
	var i=0;
	function myalert(){
		i++
		if(i == 1){
		alert("I dare you to press me again....");
		}
		if(i == 2){
		
		}
		if(i == 3){
		i = 0;
		document.body.background = "zombies.src";
		}
	}
	
</script>
</head>
<body onLoad="javascript:preLoad()">	

This is where I learn a lot of my coding for Java, JavaScript, and HTML
	<a href="http://www.thenewboston.com/"><img src="theNewBoston.gif"></a>
	
</br>

 "Check" me out;) <input type="checkbox" id="cb1" onClick="validate()" />
 <img src="Good Afternoon.gif" name="goodAfternoon">
 <input type="button" id="cb2" value="RESET" onClick="reset()"/>

	
	</BR></br></br></br></br>
    Hello, thank you for visiting my webpage I hope you like it.

  <input type="button" onClick="myalert()"value="CLICK me"/>
</body>
</html>

Background Image Transparency Help

Similar Tutorials

View Content

I have a 16x16 solid color yellow image - .gif type. I'm using it as a background for a div. I'd like to make it transparent but can't figure out how to do. I have Paint.net and follow its instructions to make the image 50% transparent but afterwards, it's completely clear with no hint of yellow.

How can I make a transparent solid image? I'd like it about 50% transparent.

Thanks...

PHP Code:
.xstooltip
{
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    font: normal 8pt sans-serif;
    padding: 3px;
    border: solid 1px;
    /*background-color: #DBDBDB;*/
    /*background-color: #FFFF77;*/

    background-repeat:repeat;
    background-image:url(/yellow_help.gif);
}

Fading Div Background Image

Similar Tutorials

View Content

How am I able to have a gallery of images fading in and out as the background of a DIV? It's currently just a static background using CSS.

You can view the HTML page in question he

http://aksdesigns.co.uk/temp/template.html

The DIV container is the one with the ID of #MainContent

Code:

#MainContent {
	width: 980px;
	height: 550px;
	margin: 0 auto;
	padding: 0px;
	background-image: url(images/Content-bg-1.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	border-left: 2px solid #153365;
	border-right: 1px solid #FFF;
}

It probably couldn't be done using CSS be how could I achieve this with Javascript?

Background Image Rotator - Need Some Help

Similar Tutorials

View Content

Hello,

I have recently been working on a website which will have rotating background images. I have found a useful javascript code (i don't know who the author is) which rotates different background images neatly after x milliseconds. here is the code:

====
<script language="JavaScript1.2">
var bgimages=new Array()
bgimages[0]="../gfx/bgs/bg1.jpg"
bgimages[1]="../gfx/bgs/bg2.jpg"

//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++){
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}

var inc=-1

function bgSlide(){
if (inc<bgimages.length-1)
inc++
else
inc=0
document.body.background=pathToImg[inc].src
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("bgSlide()",6000)')

</script>
====

The script works, and the background images rotate. However, currently the rotation of the images have no effect. I would like to add the effect of the images blending into each other when they rotate.

How would this be possible?

Thanks a bunch!

-Captainel