Advanced Search

Results 1 to 2 of 2

Thread: swap image and swap text

  1. #1
    Join Date
    Dec 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default swap image and swap text

    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>
    Last edited by DIYPARTYHIRE; 08-14-2009 at 07:22 PM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,885
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •