JavaScript - Rollover Text To Display Image In New Frame

Hello,

I'm looking for help as I have the jCarouselLite feature functioning on my website and am looking for a way of displaying another image to the right of the carousel, dependent upon which image is visible in the carousel.

I toyed with the idea of implementing another snippet of JavaScript to swap the text to the right and manually synching the swap time wise, but quickly abandoned this idea for a number of reasons, particularly as the carousely has buttons to scroll through the images displaying.

I have to admit I'm not particularly great with JavaScript, but was thinking along the lines of another function that listens for the image that is displayed, but have no idea if am way off the mark, or even if this is the right track - no idea how to implement.

Any help would be very gratefully recieved.

Thanks,

Matt

Hey guys,

I'm having a complete nightmare with this...

If you see http://bit.ly/i5TwmL you can see what I am working on. In the services section with the 8 images you can see how I am TRYING to make the site work. The idea is that when scrolling over an image the related text will appear in the right column. This is to happen for each image with different text for each. The problem (as I'm sure is quite clear from using the site) is that there is a lot of jumping. When an image is not selected the images should stay in 2 columns with text to the right.

"Scroll over the images for a brief description of the services we provide."

I doubt I'm describing this well but this is all new to me...

I have used javascript to control these rollovers.

Quote:
<script type="text/javascript">
//<![CDATA[
function toolTip(txt,top,left) {
var el=document.getElementById('foo');

var text=new Array();
text[1]="<h2>Diamond Core Drilling</h2><p>For vertical or horizontal drilling where a precise circular opening is required. This method is used to create openings for mechanical, electrical, heating and ventilation installations and is also ideal for creating holes for routing cables, placing anchor bolts, installing load carrying devices or for concrete sample analysis. The circumference of a diamond drilled opening can be from 10mm to 1 metre or more. Drilling depths are virtually unlimited using barrel extensions. Stitch drilling is a technique which involves drilling a series of 107mm diameter holes to form openings of any size.</p>";

text[2]="<p>Scroll over the images for a brief description of the services we provide.<br><br /></p><h2>WALL SAWING</h2><p>By making a series of passes along the length being cut, wall saws are used to cut through walls for door or window openings. These can also be used to form openings on floors for stairways, lifts, etc. and can be used inverted. Cutting depths are up to 700mm</p><h2>FLOOR SAWING</h2><p>The floor saw is a very rapid cutting machine and is ideal for ground floors, warehouses, roads and runways. It enables efficient repairs, alterations and groundworks to be carried out. Cutting depths can reach 400mm and the machine can be powered by diesel, petrol, three phase electricity or gas.</p><br /><h2>CHAIN SAWING</h2><p>A concrete chain saw allows for deep plunge-cutting and corners with no over-cuts. This is useful for windows, door openings and small mechanical openings. There a various applications associated with chain sawing and it can be utilised for a variety of materials including brick, stone and reinforced concrete.</p><br /><br /><h2>WIRE SAWING</h2><p>Similar to the method of wall sawing although in place of a blade are a series of pulley wheels which guide the diamond wire 6mm in diameter. This method is ideal for removing large concrete or masonry sections with virtually no noise or vibration to the structure.</p>";

text[3]="<h2>Chasing</h2><p>Neat parallel channels are cut for housing of electrical cables within a wall or floor. All our chasing plant comes supplied with dust extraction as standard.</p>";

text[4]="<h2>Controlled Demolition</h2><p>Removal of structures or individual walls and removal of waste from site as required.<br><br><h2>Robotic Demolition</h2><p>A fast, safe and efficient method of controlled demolition using three phase driven machines remotely controlled by an operator eliminating any HAVS issues associated with traditional methods of demolition.<br><br><h2>Concrete Bursting</p></h2><p>A system in which a series of holes are drilled and bursting heads inserted which use hydraulic pressure to split the concrete. This method is used to remove large areas of concrete quietly and where there is limited space to work.</p>";

text[5]="<h2>Concrete Busting</h2><p>A system in which a series of holes are drilled and bursting heads inserted which use hydraulic pressure to split the concrete. This method is used to remove large areas of concrete quietly and where there is limited space to work.</p>";

text[6]="<h2>Concrete Crunching</h2><p>Used for walls, concrete slabs or masonry crunching is a fast, controlled method of demolition and relatively dust, vibration and noise free.</p>";

text[7]="<h2>Anchor Installation & Pull Testing</h2><p>The drilling and installation of mechanical or resin anchors and the subsequent pull off testing in a wide range of applications such as starter bars, holding down bolts, crane bases, hand rails and a myriad of other applications.</p>";

text[8]="<h2>Lintel Installation & Steel Erection</h2><p>The installation of steel or concrete lintels over any size of new door or window opening after we have diamond drilled (temporarily securing the structure above) then diamond cut to form the openings.<br><br>Steel erection is a practice which involves the cutting and removal of large sections of reinforced concrete walls or floors. Acudrill can fabricate, supply and install the steelwork to the requirements of the structural engineer.</p>";

el.innerHTML=text[txt];
el.style.top=top+"px";
el.style.left=left+"px";
el.style.display="block";
document.onmouseout=function() {
el.style.display="none";
}
}
//]]>

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>

<div id="foo">
<p>Scroll over the images for a brief description of the services we provide.</p>
</div>

<div class="g292" onmouseover="toolTip(1)">
<div>
<img src="images/drilling.png" border="0" id="Image55" /></a></li></ul>
</div> <h2>DIAMOND core drilling</h2>
</div>



<div class="g292" onmouseover="toolTip(2)">
<img src="images/sawing.png" border="0" id="Image50" /></a>
</li></ul>
<h2>DIAMOND sawing</h2>
</div>




<div class="g292" onmouseover="toolTip(3)">
<img src="images/chasing.png" border="0" id="Image50" /></a>
<h2>chasing</h2></div>

<div class="g292" onmouseover="toolTip(4)">
<img src="images/demolition.png" border="0" id="Image50" /></a>
<h2>controlled demolition</h2></div>

<div class="g292" onmouseover="toolTip(5)">
<img src="images/busting.png" alt="" />
<h2>concrete busting</h2></div>

<div class="g292"onmouseover="toolTip(6)">
<img src="images/crunching.png" border="0" id="Image57" /></a>
<h2>concrete crunching</h2></div>

<div class="g292" onmouseover="toolTip(7,50,185)">
<img src="images/anchor.png" alt="" />
<h2>anchor installation &amp; pull testing</h2></div>

<div class="g292" onmouseover="toolTip(8)">
<img src="images/lintel.png" border="0" id="Image57" /></a>
<h2>lintel installation &amp; Steel erection</h2></div>
I am slightly worried about what will happen if the user has javascript disabled. Is there a way around this?

I have tried using css to control this a completely scrap the javascript http://code.hyperspatial.com/all-cod...rollover-text/ but I cannot work out how to position the text in the div.

Please help or advise.

Many many thanks!

My apologies if this request is vague, but I am not completely certain what the terms are for what I am asking. So I will include a link to an example:

http://www.v12groupinc.com/

Below the flash banner, there is a row of tabs that below display different text when you mouse over each. If you move the cursor away, the text of the last mouse-over stays (as opposed to defaulting to something else).

It is the closest example to what I'd like to do but don't really know what it is to look for in terms of assistance.

Essentially I want to make a set of 3 graphic rollover tabs that each have different text attached to them. I would like for the tab to rollover and the text to change when mousing over each (the first one would be the default of course). However I would also like for the last tab that was moused over's text to remain when the cursor is moved away.

With various tutorials online I've been able to create a text based one that unfortunately resets to default on mouseout and to which I haven't been able to add rollover images to.

If anyone can point me to a tutorial, enlighten me to what terms to search for, or even give me some code to start with, I would be most grateful. Thanks!

I have referenced the following thread for ideas on the issue I want solved, but only took it as far as I can. Any help would be great.

http://codingforums.com/showthread.php?t=202459

I would like to utilize this script where I could pass the string of words to another page.

Meaning, search for the text, actually a word, then take the two words following the searched text and have them passed to the next page...I have tried to "alert" the words, but have no success.

I have tried to modify the code using the following, but the result just posts a "-1" in my alert popup.

As you can see I modified the code from the original thread in the third block of "for" code. also, I added an "alert" tag. One more thing, I added a function call for the form button.

Hope you can help out.

The code is below:

Code:

<script type="text/javascript">
var count = 0;
var itemList = new Array();
var oldText = "";
var rawText = "";
var workText = "";

function highlight() {
// overcome problem in Firefox caused by blank fields
itemList[0] = document.getElementById("txt1").value == '' ? "FireSchmoxStryng" : document.getElementById("txt1").value;
itemList[1] = document.getElementById("txt2").value == '' ? "FireSchmoxStryng" : document.getElementById("txt2").value;
itemList[2] = document.getElementById("txt3").value == '' ? "FireSchmoxStryng" : document.getElementById("txt3").value;

if (count == 0) {
rawText = document.getElementById('subjectMatter');
workText = rawText.innerHTML; 
oldText = rawText.innerHTML; 
}
else {
workText = oldText;
}

workText = workText.replace(/(\<)/g," $1").replace(/(\>)/g,"$1 ");

for (i=0; i<itemList.length; i++) {
itemList[i]= itemList[i].replace(/^\s+|\s+$/g,"");
var currWord = new RegExp("([\\s\\r\\n\(]*"+itemList[i]+"[\\s,;\.:?!\'\"()-]+)",'gi');
workText = workText.replace(currWord," <span class='highLight'>$1<\/span> ");
}

for (i=0; i<itemList.length; i++) {	
var currWord = new RegExp("(\<\/span\>\\s)([0-9a-z%,;:\.?!\"\'()]+\\s)",'gi');
workText = workText.replace(currWord," $1<span class='highLight'>$2<\/span> ");
}

for (i=0; i<itemList.length; i++) {	
var currWord = new RegExp("(\\s[0-9a-z%,;.:?!'()]+)(\\s\<span class='highLight'>)",'gi');
workText = workText.replace(currWord," <span class='highLight'>$1<\/span>$2 ");
Text = workText.indexOf(currWord);
var url = "http://www.blank.com/results.php?searched=" + Text;
}


rawText.innerHTML = workText;
count ++;
alert(url);
}

</script>
<style type="text/css">
body {font-family: arial; font-size: 10pt; margin-top: 60px; margin-bottom: 60px; background-color: #f5f5f5;}
.highLight {font-family: arial; font-size: 10pt; color: #00008B; font-weight: bold; cursor: help;}	
</style>

</head>

<body>

<form>
First word or phrase to find <input type = "text" id = "txt1" size = "50"><br>
Second word or phrase to find <input type = "text" id = "txt2" size = "50"><br>
Third word or phrase to find <input type = "text" id = "txt3" size = "50"><br><br>

<input type = "button" value = "Highlight Selected" onclick = "highlight()">
<input type = "reset" value = "Reset Form">
<!--<input type = "button" value = "Reset Results" onclick = "document.getElementById('subjectMatter').innerHTML = oldText">-->
<input type = "button" value = "Reset Results" onclick = "highlight()">
</form>

<br>
<div id='subjectMatter'>
Join Chief Economist Mark Zandi and Director of Housing Economics Celia Chen for an introduction to Housing in Crisis: When Will Metro Markets Recover?, a new study that offers a comprehensive look at the near-term prospects for a recovery in housing markets in a recessionary environment. In addition, Dr. Zandi will critique the effectiveness of policy thus far in the housing crisis and discuss additional measures the Obama administration will enact that are assumed in the Moody's Economy.com house price forecast. Key findings:- In about 10% of metro areas, price declines will exceed 30%. 
Economic experiments in virtual worlds (or, more generally, virtual economies) have been proposed a number of times and also conducted to some extent. A recent addition to the conducting category is Reciprocity and status in a virtual field experiment by Andreas Nicklisch and Tobias Salz. In their study, the authors conducted a field study in World of Warcraft, seeking to investigate the role of reciprocity, and the effect of status on reciprocity, in employment relations. Reciprocity here means the observed tendency to react kindly to kind actions, even though such reactions are not enforced. Unlike previous economic experiments conducted in virtual worlds, the authors did not create an artificial setup for the experiment. Below, I summarize and briefly discuss the study and its findings. Economic experiments in virtual worlds (or, more generally, virtual economies) have been proposed a number of times and also conducted to some extent. A recent addition to the conducting category is Reciprocity and status in a virtual field experiment by Andreas Nicklisch and Tobias Salz. In their study, the authors conducted a field study in World of Warcraft, seeking to investigate the role of reciprocity, and the effect of status on reciprocity, in employment relations. Reciprocity here means the observed tendency to react kindly to kind actions, even though such reactions are not enforced. Unlike previous economic experiments conducted in virtual worlds, the authors did not create an artificial setup for the experiment. Below, I summarize and briefly discuss the study and its findings.
</div>
</body>
</html>

I am having trouble I can target two iframe windows at the same time using a Text Link, However I have not found a way to do this using a roll over image. Here is the Two codes I know. Can anyone help me please....


(roll over image) In the <head>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://www.midwestfishing.org/pics/01_info_blue.gif";
staticImage1 = new Image();
staticImage1.src = "http://www.midwestfishing.org/pics/01_info_black.gif";
...........................................................
(button)

<a href="info.html" rel="nofollow" target="frame1" onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=staticImage1.src;">
<img name="image1" src="http://www.midwestfishing.org/pics/01_info_black.gif" border=0></a>
...........................................................



(two frames at once text) In the <head>

<script language="javascript">
function loadTwo(iframe1URL, iframe2URL)
{
parent.frame1.location.href=iframe1URL
parent.frame2.location.href=iframe2URL
}
</script>
...........................................................
(button)

<a href="javascript:loadTwo('info.html','home.html')">info</a>



Thanks!

I'm having an issue with the main logo in the navigation bar, each time I hover over it, it searches for the rollover image. I only want this javascript function to be activated over the div "navigation_menu"

here's the html code for the logo
<div id="nav">
<a href="index.php"> <img src="images/logo_05.jpg" alt="Home Page"/></a>
</div><!-- nav -->

here's the javascript code that's causing the problems
window.onload = rolloverInit;

function rolloverInit() {
var nav = document.getElementById("navigation_menu");
for (var i=0; i<nav.images.length; i++) {
if (nav.images[i].parentNode.tagName == "A") {
setupRollover(nav.images[i]);
}
}
}

any help would be very appreciated

I want to create something similar to what they achieve with this script: http://www.magictoolbox.com/magiczoom/

I know I could just download their script, but it's for a website that will be commercial in nature, and my cousin doesn't want to pay 29 pounds (which is a lot in AUD!) for it.

I can use a rollover to display a larger image next to it, but I'm not sure on how to make the image move like that one does.

Any help or suggetions would be greatly appreciated! Originally she just wanted something like the Lightbox script, so it's annoying her changing her mind now!

OK, I want several of my images on my webpage to change when the user hovers over the graphic. I created the js and it works fine. However, now all of my (linked) images change when I hover over them.

I know what's causing this ( the Code:

( document.images[i].parentNode.tagName =="A" )

part), but not sure what the best way to fix it would be. Any advice?

window.onload=rolloverInit;

function rolloverInit( ) {
for ( var i=0; i<document.images.length; i++) {
if ( document.images[i].parentNode.tagName =="A" ) {
setupRollover( document.images[i]);
}
}
}

function setupRollover(thisImage) {
thisImage.outImage =new Image();
thisImage.outImage.src= thisImage.src;
thisImage.onmouseout=function() {
this.src=this.outImage.src;
}

thisImage.overImage = new Image();
thisImage.overImage.src= "images/" + thisImage.id + "_on.jpg";
thisImage.onmouseover= function( ) {
this.src=this.overImage.src;
}
}
[/CODE]

I then used Dreamweaver to created the code and dropped it into Jumi
but the image rollover did not work and the main image did not show.

This is the code I inserted into Jumi:

#################
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j+
+].src=a[i];}}

}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i+
+) x.src=x.oSrc;

}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}

</script>

<body onload="MM_preloadImages('images/stories/Binder1.gif','images/
stories/Binder2.gif','images/stories/Binder3.gif','images/stories/
Binder4.gif','images/stories/Binder5.gif','images/stories/
Binder6.gif','images/stories/Binder7.gif','images/stories/
Binder8.gif','images/stories/Binder9.gif')">

<div id="showbox"><img id="LargeBinderImage" alt="Three Ring Binder
Image" src="images/stories/BindersGallery/Binder1.gif" height="300"
width="600" /></div>
<div id="buttonbox">
<img src="images/stories/BindersGallery/85binder.gif" alt="85binder1"
width="85" height="85" id="thumb1"
onmouseover="MM_swapImage('LargeBinderImage','','images/stories/
Binder1.gif',1)" onmouseout="MM_swapImgRestore()" />
<img src="images/stories/BindersGallery/85binder2.gif" alt="85binder2"
width="85" height="85" id="thumb2"
onmouseover="MM_swapImage('LargeBinderImage','','images/stories/
Binder2.gif',1)" onmouseout="MM_swapImgRestore()" />
<img src="images/stories/BindersGallery/85binder3.gif" alt="85binder3"
width="85" height="85" id="thumb3"
onmouseover="MM_swapImage('LargeBinderImage','','images/stories/
Binder3.gif',1)" onmouseout="MM_swapImgRestore()" />
<img src="images/stories/BindersGallery/85binder4.gif" alt="85binder4"
width="85" height="85" id="thumb4"
onmouseover="MM_swapImage('LargeBinderImage','','images/stories/
Binder4.gif',1)" onmouseout="MM_swapImgRestore()" />
<img src="images/stories/BindersGallery/85binder5.gif" alt="85binder5"
width="85" height="85" id="thumb5"
onmouseover="MM_swapImage('LargeBinderImage','','images/stories/
Binder5.gif',1)" onmouseout="MM_swapImgRestore()" />
<img src="images/stories/BindersGallery/85binder6.gif" alt="85binder6"
width="85" height="85" id="thumb6"
onmouseover="MM_swapImage('LargeBinderImage','','images/stories/
Binder6.gif',1)" onmouseout="MM_swapImgRestore()" />
<img src="images/stories/BindersGallery/85binder7.gif" alt="85binder7"
width="85" height="85" id="thumb7"
onmouseover="MM_swapImage('LargeBinderImage','','images/stories/
Binder7.gif',1)" onmouseout="MM_swapImgRestore()" />
<img src="images/stories/BindersGallery/85binder8.gif" alt="85binder8"
width="85" height="85" id="thumb8"
onmouseover="MM_swapImage('LargeBinderImage','','images/stories/
Binder8.gif',1)" onmouseout="MM_swapImgRestore()" />
<img src="images/stories/BindersGallery/85binder9.gif" alt="85binder9"
width="85" height="85" id="thumb9"
onmouseover="MM_swapImage('LargeBinderImage','','images/stories/
Binder9.gif',1)" onmouseout="MM_swapImgRestore()" /></div>
<div id="descText">
#################

This works perfectly in a regular html site.

Does anyone have any ideas/thoughts as to what I am doing wrong or how
I can get a ROLLOVER image gallery with the thumbs in the right side
of the main image.

Sorry for the long post, but thanks in advance for your suggestions

Archibald

OK, so I created my nav bar in Photoshop. I have a off image and on image.

So, now I create a js file that displays the on image when they are hovering over that item, etc. Problem is, the js file does it for all images.

For example, if the user hovers over the header banner, it tries to look for a different image. How can I update the following javascript to have it do that only in the nav bar.

Code:

window.onload=rolloverInit;

function rolloverInit( ) { 
	for ( var i=0; i<document.images.length; i++) { 
	if ( document.images[i].parentNode.tagName =="A" ) {
	setupRollover( document.images[i]);
	}
	}
 } 
 
 function setupRollover(thisImage) { 
	thisImage.outImage =new Image();
	thisImage.outImage.src= thisImage.src;
	thisImage.onmouseout=function() { 
	this.src=this.outImage.src;
	}

	thisImage.overImage = new Image();
	thisImage.overImage.src= "images/" + thisImage.id + "_on.jpg";
	thisImage.onmouseover= function( ) { 
	this.src=this.overImage.src;
	} 
	}

I'm trying to add an image rollover effect, but when I put it into play, the first image slowly fades into the second image and stays at the second image before I even hover my mouse over it. I've tried multiple scripts and it still seems to be happening

www.alternativeland.com

Does anyone have an idea as to why?

I am new to this forum and self taught (amateur) programmer. I am making my eBay template for items that I sell (vintage clothing). I use the auction management system Blackthorne.

I am trying to make my images swap over like this seller:

Image rollover i want to replicate.

It is not difficult to this in most listings but because I use Blackthorne, I have to put tags rather than the exact url of the image in my template. for example, [[picture1]], [[picture2]], etc.

I do have a script which works so that the user can click on the photo to change it but I would prefer it if they could mouseover. The script I have been given to use is on this link:

picture show script

Thanks in advance.

First of all, hi everyone I'm new to the forum and relatively new to javascript. I just completed a course in it at university and I did pretty well but I think we all know "real life" coding is a whole other story.

Now, down to business. I'm writing up a script, derived from a sitepoint example (available for download here). I want to bring up a dynamic tool tip, on mousover of a thumbnail, that contains one large picture. The style for the tooltip is handled in the css sheet and therefor not featured here. I am also using the sitepoint Core library, similarly available for download at the aforementioned link.

I've been working on this for a while with no success. Here's what I know for certain so far: the showTipListener is running on mouseover the span and the img are being created the img is receiving the correct src the img is being attached to the span the span is being attached to the thumbnail
What I don't know is why the tooltip never appears and why the default action is not being canceled. Any thoughts would be greatly appreciated, thanks in advance for your help!

I've published the page here so that you all can observe it's behavior.

An of course here's the code
Code:

// JavaScript Document
var Tooltips =
{
	//contains the source for each full sized image
	fullImages: [
				"PhotoPortfolio/AdriSelfPortraits.jpg",
				"PhotoPortfolio/AmyUtah.jpg",
				"PhotoPortfolio/AveQ.jpg",
				"PhotoPortfolio/Bingham.jpg",
				"PhotoPortfolio/BinghamD12.jpg",
				"PhotoPortfolio/Campus.jpg",
				"PhotoPortfolio/Campus2.jpg",
				"PhotoPortfolio/Clambake.jpg",
				"PhotoPortfolio/Construction.jpg",
				"PhotoPortfolio/DadInKobeJapan.jpg",
				"PhotoPortfolio/DadInTheGarden.jpg",
				"PhotoPortfolio/HesperSongWriter.jpg",
				"PhotoPortfolio/IrishCoast.jpg",
				"PhotoPortfolio/NathanHale.jpg",
				"PhotoPortfolio/NorthConway.jpg",
				"PhotoPortfolio/Oreo.jpg",
				"PhotoPortfolio/Portsmouth.jpg",
				"PhotoPortfolio/Portsmouth2.jpg",
				"PhotoPortfolio/Portsmouth3.jpg",
				"PhotoPortfolio/RockClimbing.jpg",
				"PhotoPortfolio/RockClimbing2.jpg",
				"PhotoPortfolio/RockClimbing3.jpg",
				"PhotoPortfolio/RockClimbing4.jpg",
				"PhotoPortfolio/RockClimbing5.jpg",
				"PhotoPortfolio/RockClimbing6.jpg",
				"PhotoPortfolio/RockClimbing7.jpg",
				"PhotoPortfolio/Seaport.jpg",
				"PhotoPortfolio/Seaport2.jpg",
				"PhotoPortfolio/Snowbird.jpg",
				"PhotoPortfolio/VanderbuiltSkies.jpg",
				"PhotoPortfolio/VanderbuiltSkies2.jpg",
				],
	init: function()
	{
		//collects all the images on the page with the RollOverMe class and stroes them in image
		var image = Core.getElementsByClass("RollOverMe");
		//adds the event listener to all images' mouseover and mouseout events
		for (i=0; i<image.length; i++)
		{
			Core.addEventListener(image[i], "mouseover", Tooltips.showTipListener);
			Core.addEventListener(image[i], "mouseout", Tooltips.hideTipListener);
		}
	},
	
	showTip: function(image)
	{
		//retrieve the class number and strip out the string characters, store the number to a variable
		var sourceMatch = /(^| )source(\d+)( |$)/.exec(image.className);
        var source = parseInt(sourceMatch[2], 10);
		//creates a span element
		var tip = document.createElement("span");
		//assigns it to the class tooltip
		tip.className = "tooltip";
		//creates an image
		var tipImage = document.createElement('img');
		//sets the src attribute to appropriate element in the fullImages property using the variable source
		tipImage.src = Tooltips.fullImages[source];
		//attaches the image to the span
		tip.appendChild(tipImage);
		//attaches the span to the thumbnail
		image.appendChild(tip);
		//sets the tooltip property to display the span
		image._tooltip = tip;
		// Fix for Safari2/Opera9 repaint issue
		document.documentElement.style.position = "relative";
	},
	
	hideTip: function(image)
	{
		if (image._tooltip)
		{
			image.removeChild(image._tooltip);
			image._tooltip = null;
			
			// Fix for Safari2/Opera9 repaint issue
			document.documentElement.style.position = "static";
		}
	},
	
	showTipListener: function(event)
	{
	Tooltips.showTip(this);
	Core.preventDefault(event);
	},
	
	hideTipListener: function(event)
	{
	Tooltips.hideTip(this);
	}
};
Core.start(Tooltips)

Hi

I am trying to stop a preloaded images used in a rollover. The images are linked to a tab navigation system, that open on the same page.

if(document.images){
var image_array = new Array();
// path to the directory with images
var path = './images/food-drink/food/';
// enumeration of the "active" images
image_array[0] = path + "starters_r.png";
image_array[1] = path + "mains_r.png";
image_array[2] = path + "desserts_r.png";
image_array[3] = path + "childrens_r.png";
image_array[4] = path + "sandwiches_r.png";
image_array[5] = path + "meal_r.png";
var preload_image = new Array ();
for(var i=0; i<image_array.length; i++){
preload_image[i]= new Image();
preload_image[i].src = image_array[i];
}
}

function rollover(name, filename){
var fullpath = './images/food-drink/food/' + filename;
document.images[name].src = fullpath;
}

I am trying to change the image with another one, which will change back when a different image is clicked.

The problem seems to be that the tab navigation code is disagreeing with other code I have tried. The tab code looks like this and works fine until I add another code with document.getElementById() to the onClick event.

function swichtabs(wert) {
if (wert=='1'){ /*menu starters tab*/
document.getElementById('tabStarters').className='tab1 tabactive';
document.getElementById('tabMains').className='tab2';
document.getElementById('tabDesserts').className='tab3';
document.getElementById('tabChildrens').className='tab4';
document.getElementById('tabSandwiches').className='tab5';
document.getElementById('tabMeals').className='tab6';
}else if (wert=='2'){
etc...

The html code for the image is:

<a href="#starters"
onmouseout="rollover('btnStarters','starters.png')"
onmouseover="rollover('btnStarters','starters_r.png')"
onClick="this.onMouseOver=null;this.onMouseOut=null;
blendon('starters');
blendoff('mains');etc...;
swichtabs('1');" onclick="return false;" title="Starters"
id="tabStarters">
<img src="./images/food-drink/food/starters.png" name="btnStarters" width="129" height="30" border="0" />
</a>

I would be grateful if you could point me in the right direction.

I am trying to get the images on this page to revert back to the original photo after hover releases. I am assuming this is a simple fix, but I am no programmer and just did this in dreamweaver.

http://www.dataflurry.com/joey/