swap image and swap text

**DIYPARTYHIRE** · 08-13-2009, 03:43 AM

I have been searching the internet and many forums for the last few hours for the solution to this.

i have seen many different ways of making it work, but due to my programming inexperience im lacking the knowledgee to implement it into my web site which is almost finish.

this is the basic page at the moment

there are 20 images which when rolled over they change the main image.

what i want is when an image is rolled over then "textinfomainpic" div has the text changed in it.

Please help !! thanks

.

Code:

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Green Claws Entertainment</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="../default.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

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>
<link rel="stylesheet" type="text/css" href="../menuinfo/jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="../menuinfo/jqueryslidemenu.js"></script>

</head>
<body onload="MM_preloadImages('../hotel/BrownsoverHall-LR.jpg')">
<div id="header">
	<h2><a href=></a></h2>

<div id="myslidemenu" class="jqueryslidemenu">


<div id="page" >
<div id="spacer"></div>
	<div id="mainpic">
    <img src="../images/venues/wroxhall%20estate.jpg" name="mainpic" width="380" height="250" id="mainpic" />
  </div>
<div id="infomainpic">
    <div id="textinfomainpic"> 
	<p>Do you want to book a Professional Mobile Disco DJ to work the festive season in your Hotel or Restaurant? Look no further, we provide a great service. Our light and sound shows are clean, tidy, PAT tested yearly and we carry public liability insurance. The choice of music will depend on the Customer. We carry music from the 50's to the present. 
<br> Discounted rates for multiple bookings and in house functions.
</p>
  </div>
  </div>
<div id="spacer"></div>

  <div id="gallerydiv"> 
    <div align="center" id="smpict1"> <a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/abbey%20hotel.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/abbey%20hotel.jpg" name="uvpartyimag1e" width="75" height="75" border="0" id="uvpartyimage" /></a></div>
    <div align="center" id="smpict2"> <a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/abbey%20hotel%20malvern%20autumn2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/abbey%20hotel%20malvern%20autumn2.jpg"name="uvpartyimage2" width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpict3"> <a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/bidfordgrange.png',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/bidfordgrange.png"name="uvpartyimage3" width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpict4"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/BillesleyManor-ext.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/BillesleyManor-ext.jpg" name="uvpartyimage4"width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpict5"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/BrownsoverHall-LR.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/BrownsoverHall-LR.jpg"name="uvpartyimage5" width="75" height="75" border="0"/></a></div>
    <div align="center" id="smpict6"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/charlecote%20phesent.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/charlecote%20phesent.jpg" name="uvpartyimage6" width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpict7"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/dumbleton_hall.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/dumbleton_hall.jpg" name="uvpartyimage7" width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpict8"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/eastnor_castle_420x284.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/eastnor_castle_420x284.jpg" name="uvpartyimage8" width="75" height="75" border="0"/></a></div>
    <div align="center" id="smpict9"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/ettington%20park%20hotel.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/ettington%20park%20hotel.jpg" name="uvpartyimage9" width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpict10"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/glebe%20hotel%20barford.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/glebe%20hotel%20barford.jpg" name="uvpartyimage10" width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpicb1"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/HonileyCourt-LR.jpg',0)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/HonileyCourt-LR.jpg" name="uvpartyimage11" width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpicb2"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/lygon%20broadway.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/lygon%20broadway.jpg" name="uvpartyimage12" width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpicb3"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/SalfordHall-LR.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/SalfordHall-LR.jpg" name="uvpartyimage13" width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpicb4"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/stratford_manor.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/stratford_manor.jpg" name="uvpartyimage14"width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpicb5"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/stratford-victoria.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/stratford-victoria.jpg" name="uvpartyimage15"width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpicb6"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/sudeleycastle.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/sudeleycastle.jpg" name="uvpartyimage16"width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpicb7"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/welcome%20golf%20club%20stratford%20upon%20avon.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/welcome%20golf%20club%20stratford%20upon%20avon.jpg" name="uvpartyimage17" width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpicb8"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/white_swan.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/white_swan.jpg" name="uvpartyimage18"width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpicb9"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/wilton_hall_warwickshire1.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/wilton_hall_warwickshire1.jpg" name="uvpartyimage19"width="75" height="75" border="0" /></a></div>
    <div align="center" id="smpicb10"><a href="javascript:;" onmouseover="MM_swapImage('mainpic','','../images/venues/woodside%20kenilworth.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/venues/woodside%20kenilworth.jpg"  name="uvpartyimage20"width="75" height="75" border="0" /></a></div>


</div>

**Beverleyh** · 08-13-2009, 03:31 PM

Have a look at the source code to this - it does exactly what you need: http://www.jemthingsandstuff.co.uk/t...ver-fade3.html

Just contain your thumbnail pics inside DivA then your main pic inside DivB and your text inside DivC.

Thread: swap image and swap text

Thread Tools

Search Thread

swap image and swap text

Bookmarks

Bookmarks

Posting Permissions