Log in

View Full Version : Resolved 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:



<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
<!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>