Change several Images by clicking one

**Fuchspower** · 06-13-2011, 11:55 PM

A while ago I made this test-image which uses onmouseover and onmouseout:

Now I want to reuse this function, but now the imagechange shall happen by clicking on a certain image instead of a mouseover. Of course, I could just exchange the "onmouseover" with "onclick", but I can't make it change back with another click. Additionally, I don't want just a cycle with 2 but more images.

I've already seen other examples with "image-cycles", but these won't allow me to change several pictures at the same time.

Is there a possibility to change my "Normal1"-Script so it will have this image-cycle? Or is there another option so I could make my thoughts true?

I already posted this thread. Why has it been deleted?

**jscheuer1** · 06-13-2011, 11:59 PM

I didn't delete it, I moderated it.

Please put up a new demo, one without all of that other stuff - links and slide shows, ads etc.

**Fuchspower** · 06-14-2011, 12:07 AM

Sorry, these ADs are automatically implemented by my webspace-hoster.

Here is the content I'm talking about:

Code:

<html>
<head>
  <title>Test</title>


  <script type="text/javascript">
Normal1 = new Image();
Normal1.src = "1.jpg"; /* erste Standard-Grafik */
Normal2 = new Image();
Normal2.src = "2.jpg"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "3.jpg"; /* erste Highlight-Grafik */
Highlight2 = new Image();
Highlight2.src = "4.jpg"; /* erste Highlight-Grafik */
function Bildwechsel (Bildnr, Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
  </script>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
</head>


<body>
<a href="http://fuchspower.fu.funpic.de/" onmouseover="Bildwechsel(0,Highlight1);Bildwechsel(1,Highlight2)" onmouseout="Bildwechsel(0,Normal1);Bildwechsel(1,Normal2)"><img alt="1" src="1.jpg"></a><img src="2.jpg" alt="2">
</body>
</html>

**vwphillips** · 06-14-2011, 09:56 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
var cnt1=0;
var cnt2=0;

function Cycle(obj,cnt,ary){
 obj.src=obj.src.substring(0,obj.src.lastIndexOf('/')+1)+ary[window[cnt]];
 window[cnt]=++window[cnt]%ary.length;
}
/*]]>*/
</script>

</head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" onmouseup="Cycle(this,'cnt1',['Two.gif','Three.gif','One.gif']);" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" onmouseup="Cycle(this,'cnt2',['Two.gif','Three.gif','Four.gif','One.gif']);" />
</body>

</html>

Thread: Change several Images by clicking one

Thread Tools

Search Thread

Change several Images by clicking one

Bookmarks

Bookmarks

Posting Permissions