Danke für die Antworten, hier mal genauer angaben und eine demo: (ich werde euren vorschlag mit dem editor probieren, denke es ist gut wenn man direkt mit einem anfängt den man auch für alles benutzen kann bzw die vorlagentexte eben für die modernen sachen hat) danke. 
(komischerweise geht der link bzw bilder nur, wenn man es ohne www.
eingibt, aber ist ja nur demo auf nem kostenlosen server, muss mir erst
noch webspace kaufen)
nunja, hier der code dazu:
[HTML] <!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="de" lang="de">
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (http://www.scriptly.de)" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="1">
<style type="text/css">
.imgStyle
{
width:141px;
height:65px;
border:1px solid white;
}
</style>
<img id="mainImage" style="border:1px solid white"
src="Bilder/Gallerie/00_1.jpg" height="240px" width="435px"/>
<div id="divId" onclick="changeImageOnClick(event)">
<BR><img class="imgStyle" src="Bilder/Gallerie/00_1.jpg">
<img class="imgStyle" src="Bilder/Gallerie/00_2.jpg">
<img class="imgStyle" src="Bilder/Gallerie/00_3.jpg">
<script type="text/javascript">
var images = document.getElementById("divId")
.getElementsByTagName("img");
for (var i = 0; i < images.length; i++)
{
images.onmouseover = function ()
{
this.style.cursor = 'hand';
this.style.borderColor = 'red';
}
images[i].onmouseout = function ()
{
this.style.cursor = 'pointer';
this.style.borderColor = 'white';
}
}
function changeImageOnClick(event)
{
event = event 
window.event;
var targetElement = event.target event.srcElement;
if (targetElement.tagName == "IMG")
{
mainImage.src = targetElement.getAttribute("src");
}
}
</script>
</div>
</div>
</body>
</html>[/HTML]
+diese gallerie kann ich aber nur einmal pro seite benutzen, möchte sie
aber paar mal einsetzen. wenn ich das aber mache, laden alle thumpnails
in ein und das selbe mainimage [Blockierte Grafik: http://www.forum-hilfe.de/images/smilies/icon_sad.gif]
- - - Aktualisiert - - -
diese könnte ich öfters pro seite benutzen, aber es ändert die bilder
mit mausover, es soll aber erst mit mausklick links ändern:
[HTML]<!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="de" lang="de">
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (http://www.scriptly.de)" />
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<style type="text/css">
.gallery {width: 435px; margin: 0px;}
.gallery ul {width:435px; padding-left: 0px;}
.gallery li {display: inline; margin-right:0px;}
</style>
</head>
<body>
<script type="text/JavaScript">
$(document).ready(function() {
var galleryClass = '.gallery';
$(galleryClass+' li img').hover(function(){
var $gallery = $(this).parents(galleryClass);
$('.main-img',$gallery).attr('src',$(this).attr('src').replace('thumb/', ''));
});
var imgSwap = [];
$(galleryClass+' li img').each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
</script>
</head>
<body>
<div class="wrap">
<div class="gallery">
<img width="435" height="200" src="Bilder/Gallerie/00_1.jpg" alt="" class="main-img" />
<ul>
<li><img width="142" height="65" src="Bilder/Gallerie/00_1.jpg" alt="" /></li>
<li><img width="142" height="65" src="Bilder/Gallerie/00_2.jpg" alt="" /></li>
<li><img width="142" height="65" src="Bilder/Gallerie/00_3.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>[/HTML][/i]
(habe ihr keine trinkgeldkasse?)
ohne den meta tag erkennt er aber keine smartphones... da geht die styleänderung nur im browserfenster am pc..