Hallo "Jungs" und "Mädels",
ich habe folgendes Problem und würde mich über Hilfe sehr freuen:
Ich möchte eine Tabelle öfters auf einer Seite benutzen. Ich ich bin Anfänger und habe jetzt viele Tutorials gelesen, angeschaut, nachgebaut, aber jetzt bin ich Ratlos und verwirrt (zu viel Informationen) Hier mein Code 1 den ich nachgebaut habe: (dieser funktioniert aber nur 1 x pro Seite, er muss aber öfters verwender werden können, bzw der läd alle thumpnails in ein das gleiche gallerie fenster bzw mainImage bilder id ändern reicht nicht)
Ich schicke euch zwei Codes - es reicht wenn ihr einen davon benutzt und mit Helft (klar, beide wären spannender, wieso es nicht geht, aber einer reicht)
Hilfe bei Code 1 : Multiple Anwendung - so, das ich es öfters benutzen kann oder,
Hilfe bei Code 2: Blderwechsel von Mouseover? zu Mausklick "links".
Würde mich sehr freuen! Vielen Dank p.s. wenn ich schonmal bei profis bin, ist scriply ein guter editor? habe den genommen weil er oft bei tutorials in youtube benutzt wird.
CODE 1 (hier geht keine Multianwendung)
<!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 (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/Slider/1.jpg" height="240px" width="435px"/>
<div id="divId" onclick="changeImageOnClick(event)">
<BR><img class="imgStyle" src="Bilder/Slider/1.jpg">
<img class="imgStyle" src="Bilder/Slider/2.jpg">
<img class="imgStyle" src="Bilder/Slider/3.jpg">
<script type="text/javascript">
var images = document.getElementById("divId")
.getElementsByTagName("img");
for (var i = 0; i < images.length; i++)
{
images[i].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("src2");
}
}
</script>
</div>
</div>
<!------------------------------------->
<div id="2">
<style type="text/css">
.imgStyle
{
width:141px;
height:65px;
border:1px solid white;
}
</style>
<img id="mainImage" style="border:1px solid white"
src="Bilder/Slider/1.jpg" height="240px" width="435px"/>
<div id="divId" onclick="changeImageOnClick(event)">
<BR><img class="imgStyle" src="Bilder/Slider/1.jpg">
<img class="imgStyle" src="Bilder/Slider/2.jpg">
<img class="imgStyle" src="Bilder/Slider/3.jpg">
<script type="text/javascript">
var images = document.getElementById("divId")
.getElementsByTagName("img");
for (var i = 0; i < images.length; i++)
{
images[i].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>
</body>
</html>
Alles anzeigen
und hier Code 2: (hier ändert es die bilder mit mausover, aber ich brauche es mit mausklick links:
<!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 (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/ausbeul_1.jpg" alt="" class="main-img" />
<ul>
<li><img width="142" height="65" src="Bilder/Gallerie/ausbeul_1.jpg" alt="" /></li>
<li><img width="142" height="65" src="Bilder/Gallerie/ausbeul_2.jpg" alt="" /></li>
<li><img width="142" height="65" src="Bilder/Gallerie/ausbeul_3.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
Alles anzeigen