Solved

Image Gallery

Posted on 2004-04-21
5
474 Views
Last Modified: 2012-06-27
I have a DHTML  / Javascript  image gallary. The way it works is that it loads 3 thumbnails, and mouse over results in the big image being displayed.

However, i want it to start with a preset image rather than having to trigger it by mousing over the thumbnail.

my code is as follows.

<script type="text/javascript">

var dynimages=new Array()
dynimages[0]=["/images/photo1.jpg", ""]
dynimages[1]=["/images/photo2.jpg", ""]
dynimages[2]=["/images/photo3.jpg", ""]


var preloadimg="yes"
var optlinktarget=""
var imgborderwidth=0
var filterstring="progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)"

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

</script>
<link href="/core/css/style_main_guests.css" rel="stylesheet" type="text/css">
<table width="102%"  border="0" cellpadding="4" cellspacing="0">
    <tr>
        <td><img src="/images/mem_prof.gif" width="203" height="22"> </td>
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td width="203" valign="top"><div align="center">
        <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#CCCCCC" class="thumbnailborder">
          <tr>
            <td colspan="3"><div align="center">
                <div id="dynloadarea" style="width:192px;height:212px"></div>
            </div></td>
          </tr>
          <tr>
            <td width="34%"><div align="right"><a href="#" onMouseOver="modifyimage('dynloadarea', 2)"><img border="0" src="/images/photo1.jpg" width="58" height="58"></a></div></td>
            <td width="33%"><div align="center"><a href="#" onMouseOver="modifyimage('dynloadarea', 1)"><img border="0" src="/images/photo2.jpg" width="58" height="58"></a></div></td>
            <td width="33%"><div align="left"><a href="#" onMouseOver="modifyimage('dynloadarea', 0)"><img border="0" src="/images/photo3.jpg" width="58" height="58"></a></div></td>
          </tr>
        </table>
      </div></td>

Thanks in advance
0
Comment
Question by:proy31
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 4

Accepted Solution

by:
apprenti earned 43 total points
ID: 10884461
Maybe <body onload="modifyimage('dynloadarea', 1)">
0
 
LVL 1

Assisted Solution

by:tomwoods
tomwoods earned 41 total points
ID: 10888375
Your code would look like this:
<!-- ------------[The code below goes between the <head> tags----------- -->

<script type="text/javascript">

var dynimages=new Array()
dynimages[0]=["/images/photo1.jpg", ""]
dynimages[1]=["/images/photo2.jpg", ""]
dynimages[2]=["/images/photo3.jpg", ""]


var preloadimg="yes"
var optlinktarget=""
var imgborderwidth=0
var filterstring="progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)"

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
</script>

<!-- ------------Your <body> tag sould have this call:----------------------- -->
<body onload="modifyimage('dynloadarea', 0);">

<!-- ------------The code below goes between the <body> tags----------- -->

<link href="/core/css/style_main_guests.css" rel="stylesheet" type="text/css">
<table width="102%"  border="0" cellpadding="4" cellspacing="0">
    <tr>
        <td><img src="/images/mem_prof.gif" width="203" height="22"> </td>
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td width="203" valign="top"><div align="center">
        <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#CCCCCC" class="thumbnailborder">
          <tr>
            <td colspan="3"><div align="center">
                <div id="dynloadarea" style="width:192px;height:212px"></div>
            </div></td>
          </tr>
          <tr>
            <td width="34%"><div align="right"><a href="#" onMouseOver="modifyimage('dynloadarea', 2)"><img border="0" src="/images/photo1.jpg" width="58" height="58"></a></div></td>
            <td width="33%"><div align="center"><a href="#" onMouseOver="modifyimage('dynloadarea', 1)"><img border="0" src="/images/photo2.jpg" width="58" height="58"></a></div></td>
            <td width="33%"><div align="left"><a href="#" onMouseOver="modifyimage('dynloadarea', 0)"><img border="0" src="/images/photo3.jpg" width="58" height="58"></a></div></td>
          </tr>
        </table>
      </div></td>
0
 

Assisted Solution

by:motions
motions earned 41 total points
ID: 11189252
Here's what I'm using. It displays a default image in the 'dynloadarea' then changes to the appropriate image when clicked on.

    <div id="dynloadarea" style="width:80px;height:5px">
      <IMG src="images/05_29_04.jpg" border=0></div>

0

Featured Post

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question