jtarleton/widgetthing.js

## widgetthing.js
<script type="text/javascript">

jQuery(document).ready(function(){

jQuery('#clickme').bind('click', function(){
var q = random();

jQuery('.imgframe').hide();

jQuery('.imgframe').css('background-image', "url('mainpic"+ q +".jpg')" );

jQuery('.imgframe').fadeIn('slow');

});


});


</script>

## yahoo.html
<!DOCTYPE html>
<html lang="en-US">
<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
<head>

<script type="text/javascript">

var totalItems= 3;

function random()
{
    return Math.floor(Math.random()*totalItems+1);
	//return a number between 1 - 10
}
</script>
<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript" src="widgetthing.js"></script>

<style type="text/css">
* {
margin:0; padding:0;
}
#widget
{
margin:0; padding:0;
background:#FAFAFA;
width:450px;
height: 277px;
}

#widget h2
{
font-family: Arial, sans-serif;
font-size:18px;
line-height:19px;
color:#111111;
padding:5px 20px 5px 20px;
}


.imgframe
{
width:450px;
height:177px;
margin:0;
padding:0;
background-image: url('mainpic.jpg');
}

#imgframe1
{
background-image: url('mainpic1.jpg');
}

#imgframe2
{
background-image: url('mainpic2.jpg');
}

#imgframe3
{
background-image: url('mainpic3.jpg');
}


#blurb
{
padding: 10px 20px;
font-family:Helvetica, Verdana, sans-serif;
font-size:11.0px; line-height:12px;
}

#details
{
font-size:10px;
font-weight:700;
}

ul#lst  {
margin:0; padding:0;
}
ul#lst li {
list-style-type: none;
}

</style>

</head>
<body>

<div id="widget">
<div class="imgframe" id=""></div>
<h2>Jenni Rivera believed dead in plane crash</h2>
<div id="blurb">

<div style="float:left; width:300px; margin:0; padding:0;">The wreckage of the Mexican-American singer's aircraft is found, but authorities cannot confirm her death.
<span id="details">Details>></span>
</div>

<div style="float:right;">
	<h4>Related Links</h4>
	<ul id="lst" style="width:80px;">
	<li>Foo</li>
	<li>More on Jenni Rivera</li>
</ul>
</div>


<div style="clear:both;"></div>


</div>


</div>


<button id="clickme">CLICKME</button>
</body></html>
	<script type="text/javascript">

	jQuery(document).ready(function(){

	jQuery('#clickme').bind('click', function(){
	var q = random();

	jQuery('.imgframe').hide();

	jQuery('.imgframe').css('background-image', "url('mainpic"+ q +".jpg')" );

	jQuery('.imgframe').fadeIn('slow');

	});


	});


	</script>
	<!DOCTYPE html>
	<html lang="en-US">
	<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
	<head>

	<script type="text/javascript">

	var totalItems= 3;

	function random()
	{
	return Math.floor(Math.random()*totalItems+1);
	//return a number between 1 - 10
	}
	</script>
	<script type="text/javascript" src="jquery-latest.min.js"></script>
	<script type="text/javascript" src="widgetthing.js"></script>

	<style type="text/css">
	* {
	margin:0; padding:0;
	}
	#widget
	{
	margin:0; padding:0;
	background:#FAFAFA;
	width:450px;
	height: 277px;
	}

	#widget h2
	{
	font-family: Arial, sans-serif;
	font-size:18px;
	line-height:19px;
	color:#111111;
	padding:5px 20px 5px 20px;
	}


	.imgframe
	{
	width:450px;
	height:177px;
	margin:0;
	padding:0;
	background-image: url('mainpic.jpg');
	}

	#imgframe1
	{
	background-image: url('mainpic1.jpg');
	}

	#imgframe2
	{
	background-image: url('mainpic2.jpg');
	}

	#imgframe3
	{
	background-image: url('mainpic3.jpg');
	}


	#blurb
	{
	padding: 10px 20px;
	font-family:Helvetica, Verdana, sans-serif;
	font-size:11.0px; line-height:12px;
	}

	#details
	{
	font-size:10px;
	font-weight:700;
	}

	ul#lst {
	margin:0; padding:0;
	}
	ul#lst li {
	list-style-type: none;
	}

	</style>

	</head>
	<body>

	<div id="widget">
	<div class="imgframe" id=""></div>
	<h2>Jenni Rivera believed dead in plane crash</h2>
	<div id="blurb">

	<div style="float:left; width:300px; margin:0; padding:0;">The wreckage of the Mexican-American singer's aircraft is found, but authorities cannot confirm her death.
	<span id="details">Details>></span>
	</div>

	<div style="float:right;">
	<h4>Related Links</h4>
	<ul id="lst" style="width:80px;">
	<li>Foo</li>
	<li>More on Jenni Rivera</li>
	</ul>
	</div>


	<div style="clear:both;"></div>





	</div>






	</div>


	<button id="clickme">CLICKME</button>
	</body></html>