Hallo Zusammen,
ich habe eine Bildgalerie erstellt und würde nun gerne per JS die Funktion einbinden, dass wenn der Nutzer auf Bild X angekommen ist, sich Menüpunkt X entsprechend farblich ändert.
Habe das bisher nur mit Klick auf Bild X hinbekommen.
Ich bin gerade erst dabei, JS richtig zu lernen, wäre aber sehr dankbar für eine Hilfestellung.
Mir ist klar, dass ich eine if Anfweisung einbinden muss.
Also im Prinzip, wenn Bild X erreicht, dann ändere style. color
Ein paar Codeschnipsel/Versuche sind schon drin, aber ich komme nicht weiter.
ich habe eine Bildgalerie erstellt und würde nun gerne per JS die Funktion einbinden, dass wenn der Nutzer auf Bild X angekommen ist, sich Menüpunkt X entsprechend farblich ändert.
Habe das bisher nur mit Klick auf Bild X hinbekommen.
Ich bin gerade erst dabei, JS richtig zu lernen, wäre aber sehr dankbar für eine Hilfestellung.
Mir ist klar, dass ich eine if Anfweisung einbinden muss.
Also im Prinzip, wenn Bild X erreicht, dann ändere style. color
Ein paar Codeschnipsel/Versuche sind schon drin, aber ich komme nicht weiter.
HTML:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="style.css" rel="stylesheet">
<link href="slideshow.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 1050;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slideContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>
<script type="text/javascript">
function farbe () {
document.getElementById("text1").style.color='#fff';
}
</script>
<!--
<script language="javascript">
function setVisibility()
{
var val = document.getElementById('president_rezeptheft');
if (val == 'broschueren')
{
document.getElementById("text1").style.color='#fff';
}
}
</script>
<script type="text/javascript">
var Bild = ("broschueren")
</script>
<script type="text/javascript">
var rezeptheft = document.getElementById("president_rezeptheft");
if (rezeptheft !== "visible" )
{
alert("Das Bild wurde nicht korrekt geladen!");
}
function menu () {
if ("president_rezeptheft") =
document.getElementById("president_rezeptheft");
}
</script>
<script language="javascript">
function setVisibility()
{
var val = document.getElementById('president_rezeptheft');
if (val == 'president_rezeptheft')
{
document.getElementById("text1").style.color='#fff';
}
}
</script> -->
</head>
<body >
<div id="wrapper">
<header><img src="images/logo.png" class="logo"></header>
<main><!--<img src="images/background.jpg">-->
<nav2>
<ul>
<li><a href="#">Anzeigen</a></li>
<li class="linie"> | </li>
<li><a href="#broschueren" id="text1">Broschüren</a></li>
<li class="linie"> | </li>
<li><a href="#broschueren">Sales Support</a></li>
<li class="linie"> | </li>
<li><a href="#">Newsletter</a></li>
</ul>
</nav2>
<div id="galerie">
<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slideContainer">
<div class="slide">
<img src="slidebilder/luisina_1.jpg" width="243" height="311" border="0" style="margin-left: 30px;"/>
<img src="slidebilder/luisina_2.png" width="220" height="210" border="0" style="margin-left: 300px; margin-top: 125px;"/>
<figcaption><span class="linie_fig">|</span> <strong>Luisina</strong><br>Diese Kampagne für den führenden französischen Spezialisten im Bereich Arbeitsplatten und Spülen ist in Wohn- und Frauenzeitschriften geschaltet worden. Markante Gestaltung und High-End-Positionierung stehen im Vordergrund: Für die Premium-Marke Luisina, die sich noch im Aufbau befindet, stehen Sichtbarkeit und Image im Vordergrund.</figcaption>
</div>
<div class="slide">
<img src="slidebilder/groupama.jpg" width="215" height="280" border="0" style="margin-left: 500px;"/>
<figcaption><span class="linie_fig">|</span> <strong>Groupama</strong><br>
Die französische Groupama gehört europaweit zu den großen international tätigen Versicherungs­gesellschaften. Eine Teilbelegung im Stern hat den Auftakt zum Aufbau ihrer Deutschland-Präsenz gegeben.</figcaption>
</div>
<div class="slide">
<img src="slidebilder/lafayette.jpg" width="117" height="350" border="0" style="margin-left: 600px;"/>
<figcaption><span class="linie_fig">|</span> <strong>Galeries Lafayette</strong><br>
Für den Straßburger Standort der Galeries Lafayette stellt die deutsche Kundschaft eine sehr attraktive Premium-Zielgruppe dar. Sie wird über spezifische Anzeigen und In-House-Aktionen angesprochen, die den Pariser Luxus-Flair der Warenhauskette konsequent transportieren.</figcaption>
</div>
<div class="slide" id="broschueren"> <a href="#" onClick="farbe()"><img src="slidebilder/president_rezeptheft.png" width="331" height="242" border="0" style="margin-left: 30px;"/></a>
<figcaption><span class="linie_fig">|</span> <strong>Rezeptheft Président</strong><br>
Dauer-Sichtbarkeit im unmittelbaren Anwendungsumfeld: ein einleuchtendes Ziel, das vom Crème Fraîche-Rezeptheft konsequent umgesetzt wird. Raffinierte Rezepte unterstreichen die Gourmet-Positionierung, folienkaschiertes, wischfestes Papier sorgt für Lebensdauer im gnadenlosen Küchenbiotop.</figcaption>
</div>
</div>
</div>
<!-- Slideshow HTML -->
</div>
</main>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/* CSS Document */
html, body {
background-color: #00131b;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-size: 100%; /*wichtig, für die sich daran ausrichtenden anderen Schriftgrößen > in der Regel 16px >> 1em = 16px >> 1.5em = 24:16 >> 1.5 x 16 = 24*/
line-height: 130%;
border-width: 0px;
font-style: normal;
/*color: aqua;*/
}
#wrapper {
margin-left: auto; /*mittig setzen*/
margin-right: auto;
max-width: 1366px; /*hier bleibt Angabe in px >> alle anderen Werte dann in %*/
height: 830px;
/*background-color: aqua;*/
}
header {
width: 100%;
height: 12.048193%;
/*background-color: antiquewhite;*/
}
.logo {
float: right;
padding: 1.8% 0px 0px 0px;
height: 69%;
}
main {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
max-width:100%;
height: 79.518072%;
/*background-color:blueviolet;*/
}
#galerie {
/*background-color: chartreuse;*/
background-image: url(images/wrapper.jpg);
background-repeat: no-repeat;
max-width: 1050px;
width: 100%;
height: 500px;
position: relative;
top: 100px;
}
.linie_fig {
color: #990000;
font-weight: bold;
padding: 0px 5px 0px 0px;
font-size: 130%;
vertical-align: 20%;
}
/*Navi oben*/
nav2 {
position: absolute;
width: 1050px;
}
nav2 ul {
list-style: none;
border: 0;
/*background-color: aqua;*/
float: right;
margin: 70px 0px 0px 0px;
}
nav2 li {
display: inline;
}
nav2 a {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-size: 100%;
color: #6b7b87;
text-decoration: none;
font-weight: normal;
}
nav2 a:hover {
color: #fff;
}
nav2:active {
color: #fff;
}
.linie {
color: #990000;
font-weight: bold;
}
/**
* Slideshow style rules.
*/
#content.slide {
margin:0 auto;
width:93px;
height:450px;
display: flex; /*für vertikale Zentrerung*/
align-items: center; /*für vertikale Zentrerung*/
/*justify-content: center; /*für zusätzlich horizontale Zentrerung*/
/*background-color: aquamarine;*/
}
#slideshow {
width: 1050px;
margin: 0;
padding: 0;
height:500px;
z-index:10;
position: absolute;
/*background-color:#fff;*/
}
#slideContainer {
overflow: hidden;
width: 930px;
height: 500px;
position: absolute;
margin: 30px 0px 0px 60px;
/*background-color: antiquewhite;*/
}
.slide {
margin:0 auto;
width:93px;
height:450px;
display: flex; /*für vertikale Zentrerung*/
align-items: center; /*für vertikale Zentrerung*/
/*justify-content: center; /*für zusätzlich horizontale Zentrerung*/
/*background-color: aquamarine;*/
}
figcaption {
position: relative;
width: 350px;
height:400px;
/*background-color: aquamarine;*/
color: #666;
}
.slide:nth-child(1) figcaption {
margin: 80px 0px 0px 300px;
position: absolute;
}
.slide:nth-child(2) figcaption {
margin: 110px 0px 0px 100px;
position: absolute;
}
.slide:nth-child(3) figcaption {
margin: 50px 0px 0px 200px;
position: absolute;
}
.slide:nth-child(4) figcaption {
margin: 150px 0px 0px 400px;
position: absolute;
}
/**
* Slideshow controls style rules.
*/
.control {
display:block;
width:40px;
height:348px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
/* Transparenter Hintergrund:
filter:alpha(opacity=8); /* IE
opacity:0.8; /* allgemein
-moz-opacity:0.8; /* Mozilla
-khtml-opacity:0.8; /* KTHML
-opera-opacity:0.8; /* Opera
*/
z-index: 99;
}
#leftControl {
top:200px;
left:20px;
background:url(images/pfeil_links.gif) no-repeat 0 0;
}
#rightControl {
top:200px;
right:0;
background:url(images/pfeil_rechts.gif) no-repeat 0 0;
}