JavaScript - Nav Swapping For P With Mouseover And Fadeout

Hi,

I am looking for a script which could do picture animation like in this page

But there is other problem: When you put your mouse on them, they appear colored. I need that this appearing action would take 5 seconds.

5 sek. to become colored, 5 sek. to become grey when you put away your mouse.

If you need more info, ask.. Thanks a lot.

I am using fadein and out of jquery, but size of jquery file is high for me. so i should replace it

do anyone know, how can i write fadein and fadeout functions? is anyone know its source code?

Best Morteza

Hi Guys,

I'm using jcarousellite to show my newsitems in a vertical carousel.
http://www.gmarwaha.com/jquery/jcarousellite/

The carousel itself works perfectly, now I'm trying to add that before the news scrolls upwards the top news-item fades-out first.

Now it is fading out the complete list and I simply can't seem to figure out how to 'talk' to the 'active/top' <li> in the list.


Can someone give me a hint?

Thanks in advance,
Marcel


-- Code Below --

Code:

$(function() {
	$(".widgetCarousel").jCarouselLite({
		circular: true,
		vertical: true,
		visible: 3,
		scroll: 1,
		start: 1,
		auto: 500,
		speed: 1000,
		beforeStart: function(a) {
			$(a).parent().fadeTo(100, 0);
    		},
		afterEnd: function(a) {
			$(a).parent().fadeTo(100, 1);
		}
    	});

});

<div class="widgetCarousel">
	<ul>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>	
	</ul>	
</div>

How can I add fadeIn and fadeOut with a duration that I can set/adjust to this javascript?
The site is using Zencart and the the Image Hover effect comes from the Image Handler 2 Add-on.

Thank you in advance for your help. Your time and attention in helping me with this is greatly appreciated.

Here is a link to the site residing on a subdomain I use to build sites on http://test3.fullspecweb.com

I read the "Read Before Posting" and it said to only post the code you are having trouble with, but I have no idea which section that would be so I apologize for being such a noob

Here is the script from the jscript_imagehover.js file...
Code:

var offsetfrommouse=[20,20]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400;    // maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet

// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;
var vpos;
//Detect IE
var stIsIE = /*@cc_on!@*/false;
//detect opera
var isOpera =
    window.opera?1:0;
// Detect Webkit browsers
var isWebKit =
  navigator.userAgent.indexOf("AppleWebKit") > -1;

if (document.getElementById || document.all){
  document.write('<div id="trailimageid">');
  document.write('</div>');
}

function getObj(name) {
  if (document.getElementById) {
        this.obj = document.getElementById(name);
    this.style = document.getElementById(name).style;
  } else if (document.all) {
    this.obj = document.all[name];
    this.style = document.all[name].style;
  } else if (document.layers) {
    this.obj = document.layers[name];
    this.style = document.layers[name];
  }
}

function gettrail(){
  return new getObj("trailimageid");
}

function truebody(){
if (isWebKit){
  return document.body;
  }else if (isOpera) {
  return document.documentElement;
  }else{
  return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  }
}

function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
    zoomimg_w=zoomimgwidth;
    zoomimg_h=zoomimgheight;
  if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
  trailobj = gettrail().obj;
  trailobj.style.width=(zoomimgwidth+(2*padding))+"px";
  trailobj.style.height=(zoomimgheight+(2*padding))+"px";
  trailobj.setAttribute("startx", startx);
  trailobj.setAttribute("starty", starty);
  trailobj.setAttribute("startw", startw);
  trailobj.setAttribute("starth", starth);
  trailobj.setAttribute("imagename", imagename);
  trailobj.setAttribute("imgtitle", title);
  document.onmousemove=followmouse;
}

function hidetrail(){
  trailstyle = gettrail().style;
  trailstyle.visibility = "hidden";
  document.onmousemove = "";
  trailstyle.left = "-2000px";
  trailstyle.top = "-2000px";
}

function followmouse(e){

  var xcoord=offsetfrommouse[0];
  var ycoord=offsetfrommouse[1];
if (stIsIE){
  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);
}
else
{
  var docwidth=pageXOffset+window.innerWidth-15;
  var docheight=Math.min(window.innerHeight);

}
  var relativeX = null;
  var relativeY = null;
  if (typeof e != "undefined"){
    if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
      relativeX = e.layerX;
      relativeY = e.layerY;
    } else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
//      relativeX = e.x; // original code replaced to work with Opera
//      relativeY = e.y; // original code replaced to work with Opera
      relativeX = event.offsetX;
      relativeY = event.offsetX;
    }
    if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
      xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
    } else {
      xcoord += e.pageX;
    }
    if (docheight - e.pageY < zoomimg_h + (2 * padding)){
      ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
      // returning different values for ff and (opera and webkit) - fixed 12th june 2010
    } else {
      ycoord += e.pageY;
    }

  } else if (typeof window.event != "undefined"){ // Seems to be IE
    if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
      relativeX = event.x;
      relativeY = event.y;
    } else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
      relativeX = event.offsetX;
      relativeY = event.offsetY;
    }

    if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
      xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
    } else {
      xcoord += truebody().scrollLeft+event.clientX;
    }
/* event.clientY is not valid in firefox netscape or opera, but ie has to use it */
var ie_offset = -20;
    if ( docheight - event.clientY < zoomimg_h + (2 * padding) ){
      /*
    ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) - (docheight + truebody().scrollTop -event.clientY) ) );
*/
        ycoord += ie_offset + truebody().scrollTop + event.clientY - Math.max(0,(0 + zoomimg_h + (2 * padding) - (docheight - event.clientY) ) );
    } else {
        ycoord += ie_offset + truebody().scrollTop + event.clientY;
    }
  }

  trail = gettrail();
  startx    = trail.obj.getAttribute("startx");
  starty    = trail.obj.getAttribute("starty");
  startw    = trail.obj.getAttribute("startw");
  starth    = trail.obj.getAttribute("starth");
  imagename = trail.obj.getAttribute("imagename");
  title     = trail.obj.getAttribute("imgtitle");

  // calculate and set position BEFORE switching to visible
if (stIsIE){
  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
}else{
  var docwidth=pageXOffset+window.innerWidth-15;
  var docheight=Math.max(document.body.offsetHeight, window.innerHeight);
}

  if(ycoord < 0) { ycoord = ycoord*-1; }
  if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
  if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
  trail.style.left=xcoord+"px";
  trail.style.top=ycoord+"px";

  if (trail.style.visibility != "visible") {
    if (((relativeX == null) || (relativeY == null)) ||
      ((relativeX >= startx) && (relativeX <= (startx + startw))
      && (relativeY >= starty) && (relativeY <= (starty + starth)))){
      newHTML = '<div><h1>' + title + '</h1>';
      newHTML = newHTML + '<img src="' + imagename + '"></div>';
      trail.obj.innerHTML = newHTML;
      trail.style.visibility="visible";
    }
  }
}

Is it possible to have a form's textarea background image fadeout to an alternate bg image, when that textarea is selected (by clicking the textarea or tabbing to it)? I've never seen this done before, but I'd really like to do it..

I've got a <ul> w/ 6 <li> items and CSS to make them 104x228 side blocks, which hold 2 images, one on top of the other. The 6 rows of images look like this:

X X X X X
X X X X X

This is what I want: The top row of images to be opacity:0 (or hidden), and then when you mouseover the bottom images, the top images come to 100 opacity. When you mouseout, the opacity is back to 0.

Here's the HTML and CSS:

Code:

<ul class="carz">
<li><img src="img/impreza2.jpg" class="imgtophidden"/><img src="img/impreza.jpg" /></li>
<li><img src="img/wrx.jpg" class="imgtophidden"/><img src="img/wrx.jpg" /></li>
<li><img src="img/legacy2.jpg" class="imgtophidden"/><img src="img/legacy.jpg" />/li>
<li><img src="img/outback2.jpg" class="imgtophidden"/><img src="img/outback.jpg" /></li>
<li><img src="img/forester2.jpg" class="imgtophidden"/><img src="img/forester.jpg" /></li>
<li><img src="img/tribeca2.jpg" class="imgtophidden"/><img src="img/tribeca.jpg" /></li>
</ul>

The classes are like so:

Code:

.imgtophidden {
opacity: 0;
}
.imgtop {
opacity: 100;
}

I am new to jQuery coding (but loving learning) and I want to figure out: how do I make this in jQuery? Here's what I have so far:

Code:

$(function() {
$("ul.carz li").hover(function() {
	$(this).find('img.imgtophidden').addClass('imgtop')
	} , function() {
	$(this).find('img.imgtop').addClass('imgtophidden')
});
});

Hello, all. I have a common problem, but despite my research I have been unable to find a solution that works for my situation.

I have a large image and several thumbnails below it. I am working with a content management system, so I am able to edit the output of the anchor text around the image, the divs around the image, but NOT the actual image string itself.

The images do have some classes built into them, but no IDs.

Anyways, I want the main image source to change based on the href of the thumbnail below. So if you click on any one of the thumbs, the href for that thumbnail populates as the source for the main image.

Here is my code so far:

Code:

<div class="images" id="big-image">
<a href="dianaminiflash_shop0001-11.jpg">
<img width="500" height="500" src="dianaminiflash_shop0001-11-500x500.jpg" class="attachment-shop_single wp-post-image" /></a>
<div class="thumbnails">
<a href="dianamini_en-rose_front1.jpg" title="dianamini_en-rose_front" rel="thumbnails" class="product-thumb first">
<img src="dianamini_en-rose_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a>
<a href="diana-mini_fern-green_front1.jpg" class="product-thumb ">
<imgsrc="diana-mini_fern-green_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a>
<a href="diana-mini_flashkit_white_front1.jpg" class="product-thumb last">
<img src="diana-mini_flashkit_white_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a>
</div>
</div>

One of the things I've tried that has not worked but has been offered up as a solution on this forum and others is:

Code:

$(".thumbnails a").click( function() {
var changeSrc = $(this).attr("href");
$(".attachment-shop_single").attr("src", changeSrc);
return false;
});

Any suggestions on what I'm doing wrong here? I really appreciate the help in advance.

Hi everyone,

I'm needing some help capturing just the file name rather than the entire path of the SRC on my input type="image". Basically when I hover over an image, the Default Image should change to the image being hovered on. Here is my code, can't quite get it to work. Sorry I'm very new to JavaScript

Code:

<html>
<head>

<script language = "Javascript">
function ChangeDefault(src)
{
//document.frmMain.DefaultImage.src = src <--Doesn't work at all
alert(src) //<---Displays the entire file path, want just file name 

}
</script>
</head>
	
<body>

<form name="frmMain">
<input type="image" name="DefaultImage" SRC="RWDie1.bmp" HEIGHT=110 WIDTH=160 />
<br />
<input type="image" name="img2" SRC="RWDie2.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img3" SRC="RWDie3.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img4" SRC="RWDie4.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img5" SRC="RWDie5.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />


</form>

</body>
</html>

I have selection boxes that when you choose an option an associated picture is supposed to display.. the problem is that with IE i can use whatever attribute i want and i get the desired effect except with the label attribute which happens to be the only attribute (i know of) that firefox will work with... IE still swaps the picture but also changes the text in the selection box to the img url.. here are my codes:
Code:

function swapImage(){
	var theImage2Display = document.comp.caseselect.options[document.comp.caseselect.selectedIndex].label;
	var imagePlace = document.getElementById("caseimg");
	imagePlace.src = theImage2Display;
		
}

and in the html
Code:

<img src="start.jpg" id="caseimg" />


<select name="caseselect" style="width:625px" onchange="Calculate(); swapImage();">
						<option label="start.jpg" value="0" selected="true">Case</option>
						<option label="COOLER MASTER Elite 310red.jpg" value="50">COOLER MASTER Elite 310 Red ($50.00)</option>
						<option label="COOLER MASTER Elite 310blue.jpg" value="50">COOLER MASTER Elite 310 Blue ($50.00)</option>
						<option label="COOLER MASTER Elite 310orange.jpg" value="50">COOLER MASTER Elite 310 Orange ($50.00)</option>
						<option label="COOLER MASTER Elite 310silver.jpg" value="50">COOLER MASTER Elite 310 Silver ($50.00)</option>
					</select>

Hi everyone,
I am looking for JS script to replace find all the href values on a page and replace those href values matching them with an array of values.

my array, lets say is a = {'some.ex.com', 'abc.ex.com/tv', 'some.name.ex.com', 'bcd.ex.com/dir1/dir2/some.jsp' }; etc

i want to find all the URLs on a given page, check if each found url matches with any of the values in the array, if match found, just replace only "ex.com" with "example.com" for every match.

I am all new to JS and please please help

Many thanks

Problem: I have a DIV whose content needs to change on mouseover and return to prior state on mouse out. I do not want to pre store the divs inner HTML in variables. So I am trying to get the script on execution (mouseover) to grab the existing innerHTML from the DIV, assign it to a variable, then write the new innerHTML content.

on mouse out, function sets innerHTML to the variable in order to restore original content.


For some reason the code below causes a strange flicker effect, also sometimes it catches the mouseout and works, other times it does not catch mouseout and is stuck with the content changed on mouse over?

any ideas why/how i set this up wrong?




HTML
Code:

<div id="ac-repair-inspection" class="bgbblue cborder" onMouseOver="test();" onMouseOut="testo();" >
  <div class="ctr"><h2 class="fs19 uline">COOLING SYSTEM TUNE-UP</h2></div>
<div style="padding-left:17px">
<ul style="padding:0;" class="fs15">
<li>Check Refrigerant Pressures</li>
<li>Monitor Thermal Expansion Valve operation</li>
<li>Check temperature differential</li>
</ul>
</div> <!-- end list -->
</div> <!-- end ac repair inspection -->

SCRIPT (Placed at end of HTML before closing body tag)
Code:

<script type="text/javascript">
var	temp= document.getElementById("ac-repair-inspection").innerHTML;
function test() {document.getElementById("ac-repair-inspection").innerHTML="<img src='../images/layout_images/cold-tune-up-promo.png' width='340' height='428'>";}
function testo() { document.getElementById("ac-repair-inspection").innerHTML= temp;}
</script>

CSS
Code:

#ac-repair-inspection {
	position:absolute;
	width:340px;
	height:428px;
	left: 453px;
	top: 10px;
}

For part of my program I need a function that will switch two images, so when image 1 is clicked on, the function saves image 1, then image 2 is clicked on, and the spot where image 2 is receives the first image, while the place where image 2 was becomes the first image, a simple swapping function. yet, I'm having trouble writing it; this is what I have:
<script>
click=1
function swap(What input do I need? the img src?){
if (click==1){
var1=imgsrc
click=2

}

else{
var2=imgsrc
//then switch them so:
x=var1
var1=var2
var2=x
click=1
}
}
</script>

How does one go about swapping the Javascript Source file for another on when a checkbox is clicked, obviously the sources have to revert to their normal state on reload or unchecking the checkbox:

this would be the original source:
<script type="text/javascript" src="Includes/eng_chars.js"></script>

it would be swapped for this souce file on checkbox checked:

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

and then returned to
<script type="text/javascript" src="Includes/eng_chars.js"></script>
when the checkbox is unchecked, page is reloaded or the the reset (clear form) button is pushed

Thanks

Aloha,

I'm trying to make a page that changes a pic to match the paragraph the user's mouse is over.

Page is here,
http://rentalocal.thad.com/sample1

The problem I have is that the page reloads the initial image (the map) every time I move my mouse from one list item to the next, before it loads the next pic. It only does this the first time, but it's annoying, slow, and makes my page look bad. I tested it using both Safari and Firefox and got the same results. Does anyone know how I should correct it?

TIA,
Thad

Code:

<ul class="borderit" onmouseout="document.getElementById('picture').src='/pic0.jpg'">
	<li onmouseover="document.getElementById('picture').src='/pic1.jpg'">
		We are picked up at our hotel in Waikiki. We are greeted with aloha, and fresh leis too.
		Our destinations are numerous, so let's get started!
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic2.jpg'">
		We drive away from Waikiki toward the Windward side of O'ahu. Along the way, we see Diamond Head.
		We stop at a scenic lookout for our first pictures of the day.
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic3.jpg'">
		From there we view at Koko Crater and Hanauma Bay. Next we stop at the Halona Blowhole,
		where the waves force water through a lava tube and into the sky as high as 30 feet!
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic4.jpg'">
		We continue along past the amazingly beautiful blue costal waters. Have you ever seen waters so blue?
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic5.jpg'">
		We are now far from the hustle and bustle of Honolulu and Waikiki. We stop for a visit to one of the many
		fantastic local beaches, but not for long, we have much more to see!
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic6.jpg'">
		As we continue we reach a local macadamia nut farm where we stop to buy some flavorful gifts for friends
		back home. We make more visits to an art gallery, a ranch, a local restaurant
		for some ono (Hawaiian word for yummy) food.
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic7.jpg'">
		We make a stop at Laie Point, and learn about its Hawaiian legend.
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic8.jpg'">
		From there we continue on to the North Shore. We stop at a few of the world-famous beaches and observe
		some of the day's surfers. We even get a chance to swim with a honu (turtle).
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic9.jpg'">
		After a stop at a shrimp truck, we get to Hale'iwa Town for some shopping and dining. We get some yummy Matsumoto Shave Ice.
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic10.jpg'">
		After leaving the North Shore we begin our return the Waikiki. We travel through wonderfully fragrant pineapple fields.
		We stop at the Dole Plantation and try not to get lost in the world's largest maze.
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic11.jpg'">
		On our way back to town we visit the National Cemetery at Punchbowl and the State Capitol.
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic12.jpg'">
		Our final stop is another scenic point for one last view of the day.
	</li>
	<li style="margin-bottom:.5em" onmouseover="document.getElementById('picture').src='/pic13.jpg'">
		We return to our hotel. Today we saw so many wondrous sights, took countless pictures, heard about Hawaiian history and legend,
		sampled some local food, discovered some Hawaiian treasures, and learned some Hawaiian language. This will be a memory
		that we will recall for the rest of our lives.		
	</li>
</ul>

ok so i need help....

I need to create a page containing five image tags, two buttons, a <select> and a <textarea>. The images tags will each contain a picture of one of six possible outcomes for the dice portraying the numbers one through six..

The first button: When the user clicks on the button, all dice are rolled once. For each die when rolled, the src of its image tag is replaced with a random one of six possible pictures -- each picture being chosen with equal probability (1/6).... I HAVE THIS DONE

The select: The user may select any of the numbers one through six. Whenever a picture is clicked upon, then that die takes on the value shown inside the <select>..... THIS IS WHAT I NEED HELP WITH

The textarea: Results of the dice rolls should be kept as a running log (a cumulative history) in a textarea at the bottom of the page. With each roll (initiated by the click of the button), we should be able to see the complete history of all current and previous dice rolls. You need not consider changes brought about clicks on individual dice in conjunction with the <select>....I HAVE THIS DONE

The second button: A button below the textarea, should allow the user to obtain a report (overwriting the current contents of the log in the textarea) which tabulates the frequency of each of the six outcomes plotted separately for each of the dice. The frequency tabulation should show how often each die was rolled, as consistent with the data stored in the log.... I HAVENT EVEN GOTTEN AROUND TO WORRYING ABOUT THIS YET






This is what i have so far and have so far exhausted everything that i know to try to get it to work but this is just the code with out any of my failed attempts dragged into it


<head>
<style>
input{background-color:#B0D0BC;text-align:center}
</style>
<script>

order=["c_01.jpg"]

function roll(){

{r=Math.ceil(Math.random()*5)
document.images[0].src="c_0"+r+".jpg"
t.value=t.value+"\n"+r}

{r=Math.ceil(Math.random()*5)
document.images[1].src="c_0"+r+".jpg"
t.value=t.value+" "+r}

{r=Math.ceil(Math.random()*5)
document.images[2].src="c_0"+r+".jpg"
t.value=t.value+" "+r}

{r=Math.ceil(Math.random()*5)
document.images[3].src="c_0"+r+".jpg"
t.value=t.value+" "+r}

{r=Math.ceil(Math.random()*5)
document.images[4].src="c_0"+r+".jpg"
t.value=t.value+" "+r}
}

function swap(n){


remember=document.images[n].src=
document.images[n].src="c_01.jpg"
remember=order[n]



}




</script>



<div align="center"><center><table border="4" cellpadding="5" bgcolor="#E0E0DC">

<tr>
<td>
<img src="c_01.jpg" alt="100" onclick="swap(0)"></td>
<td>
<img src="c_02.jpg" alt="100" onclick="swap(1)"></td>
<td>
<img src="c_03.jpg" alt="100" onclick="swap(2)"></td>
<td>
<img src="c_04.jpg" alt="100" onclick="swap(3)"></td>
<td>
<img src="c_05.jpg" alt="100" onclick="swap(4)"></td>
</tr>
<tr>

<td colspan="5" align="center">
Select A Value:
<select name="hi">
<option value="hi1" onchange="swap(0)">1</option>
<option value="hi2" onchange="swap(1)">2</option>
<option value="hi3" onchange="swap(2)">3</option>
<option value="hi4" onchange="swap(3)">4</option>
<option value="hi5" onchange="swap(4)">5</option>
</select>

</td>

</tr>
<tr>
<td colspan="5" align="center">
<input type="button" onclick="roll()" value="roll them">

<br>
<textarea name="t" cols="40" rows="12" >History Of Roles</textarea>