[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Image Gallery

Posted on 2004-04-21
5
Medium Priority
?
480 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 172 total points
ID: 10884461
Maybe <body onload="modifyimage('dynloadarea', 1)">
0
 
LVL 1

Assisted Solution

by:tomwoods
tomwoods earned 164 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 164 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

656 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