Onclick swap image and swap text in div

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 456,605 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,492 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 7560 | Replies: 1 | Solved

•

Join Date: Nov 2007

Posts: 2

Reputation: meangreta is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

meangreta

Offline

Newbie Poster

Onclick swap image and swap text in div

Nov 6th, 2007

I looked at tons of previous threads, and didn't find anything to help with my specific need. I have a page where I want to swap a large image using navigation AND pass text related to that image to the area underneath. (http://vinegar-works.com/casestudies.html).

I used layers to show and hide the text related to the image. The problem is getting it to work with the slider that's used for the "previous" and "next" buttons.

I'm not good a writing custom javascript. Any help would be appreciated.

Help with Code Tags

(Toggle Plain Text)

<div class="section" id="section1">
<img src="images/casestudies/woman.png" width="667" height="436" alt="Gears">
</div>
<div class="section" id="section2">
<img src="images/casestudies/money.png" width="667" height="436" alt="Gears">
</div>

<div class="section" id="section3">
<img src="images/casestudies/gear.png" width="667" height="436" alt="Gears">
</div>

<div class="section" id="section4">
<img src="images/casestudies/grill.png" width="667" height="436" alt="Gears">
</div>

<script type="text/javascript" charset="utf-8">
var slide = new Glider('slideshow-work', {controlsEvent: 'mouseover',duration:.5, autoGlide: false, frequency: 5});
</script>

<div id="controls">

<ul id="prevnext">

<li id="next"><a href="" onclick="slide.next();return false">Next</a></li>

<li id="dot"><a href="#section1" onclick="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer3','','hide','Layer4','','hide')"></a></li>
<li id="dot"><a href="#section2" onclick="MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer3','','hide','Layer4','','hide')"></a></li>
<li id="dot"><a href="#section3" onClick="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','show','Layer4','','hide')"></a></li>
<li id="dot"><a href="#section4" onClick="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','show')"></a></li>

<li id="prev"><a href="" onclick="slide.previous();return false;">Previous</a></li>
</ul>

</div>		


</div>

<h4><span class="italic">Featured Project:</span>Some Project</h4>

<div class="doubleline"></div>

</div>

<div id="content-work-info">

<div id="Layer1" style="z-index:1; position:absolute; visibility: hidden;">This is the text associated with layer 1.</div>
<div id="Layer2" style="z-index:1; position:absolute; visibility: hidden;">This is the text associated with layer 2.</div>
<div id="Layer3" style="z-index:1; position:absolute; visibility: hidden;">This is the text associated with layer 3.</div>
<div id="Layer4" style="z-index:1; position:absolute; visibility: hidden;">This is the text associated with layer 4.</div>



</div>

<div class="section" id="section1">
<img src="images/casestudies/woman.png" width="667" height="436" alt="Gears">
</div>
<div class="section" id="section2">
<img src="images/casestudies/money.png" width="667" height="436" alt="Gears">
</div>

<div class="section" id="section3">
<img src="images/casestudies/gear.png" width="667" height="436" alt="Gears">
</div>

<div class="section" id="section4">
<img src="images/casestudies/grill.png" width="667" height="436" alt="Gears">
</div>

<script type="text/javascript" charset="utf-8">
var slide = new Glider('slideshow-work', {controlsEvent: 'mouseover',duration:.5, autoGlide: false, frequency: 5});
</script>

<div id="controls">

<ul id="prevnext">

<li id="next"><a href="" onclick="slide.next();return false">Next</a></li>

<li id="dot"><a href="#section1" onclick="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer3','','hide','Layer4','','hide')"></a></li>
<li id="dot"><a href="#section2" onclick="MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer3','','hide','Layer4','','hide')"></a></li>
<li id="dot"><a href="#section3" onClick="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','show','Layer4','','hide')"></a></li>
<li id="dot"><a href="#section4" onClick="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','show')"></a></li>

<li id="prev"><a href="" onclick="slide.previous();return false;">Previous</a></li>
</ul>

</div>		


</div>

<h4><span class="italic">Featured Project:</span>Some Project</h4>

<div class="doubleline"></div>

</div>

<div id="content-work-info">

<div id="Layer1" style="z-index:1; position:absolute; visibility: hidden;">This is the text associated with layer 1.</div>
<div id="Layer2" style="z-index:1; position:absolute; visibility: hidden;">This is the text associated with layer 2.</div>
<div id="Layer3" style="z-index:1; position:absolute; visibility: hidden;">This is the text associated with layer 3.</div>
<div id="Layer4" style="z-index:1; position:absolute; visibility: hidden;">This is the text associated with layer 4.</div>



</div>