Hotspot toevoegen aan Rollover Image

Status
Niet open voor verdere reacties.

chris1382

Gebruiker
Lid geworden
22 aug 2006
Berichten
10
Op mijn site heb ik met behulp van rollover images knopjes gemaakt.
http://members.home.nl/chrisklomp
Als je over het knopje gaat verschijnt er netjes rechts een tekst...
Dit is ook de bedoeling maar als je rechts naast het knopje met je
muis beweegt verschijnt de tekst ook...
Ik wil natuurlijk dat de tekst alleen verschijnt als je op het knopje staat
kan ik dit doen doormiddel van hotspots of weet iemand een andere manier?
Alvast bedankt.....
 
Momenteel werkt er helemaal niets van die rollover.
Zoek je hier nog een oplossing voor?

Greetz : Jer:cool:en.
 
Thx maar heb al een oplossing gevonden.
Gewoon in de code de nummers omdraaien van de rollover images
zodat ze naar een ander rollover image verwijzen en ergens
anders dus een foto / tekst etc in beeld komt.
Heb nu een ander probeelm iemand verstand van SCRIPTS.... JAVA
http://www.html-site.nl/forum/9_7495_0.html
 
Laatst bewerkt:
Bedoel je "java" of "javascript"? Want dat is niet hetzelfde.
Van javascript heb ik wel wat verstand.
Ik geraakt trouwens niet op de laatste link die je hier gegeven hebt.

Greetz : Jer:cool:en.
 
Zou graag een fade effect willen als ik over de thumbnails ga
Zodat de foto's mooi in elkaar overvloeien.
Weet alleen niet waar ik onderstaande regel moet plaatsen in mijn script.
En of de onderstaande regel voldoende is om het effect te krijgen om dit
ik nog meer regels moet toevoegen?

var filterstring="progidXImageTransform.Microsoft.Grad ientWipe(GradientSize=1.0 Duration=0.7)"

Weet iemand waar ik dit in het script moet plaatsen alvast bedankt?
Het script staat op de onderstaande site.
http://members.home.nl/chrisklomp/image_slideshow. html

Of moet ik het hier aanpassen????

var displayWaitMessage=true; // Display a please wait message while images are loading?


var activeImage = false;
var imageGalleryLeftPos = false;
var imageGalleryWidth = false;
var imageGalleryObj = false;
var maxGalleryXPos = false;
var slideSpeed = 0;
var imageGalleryCaptions = new Array();
function startSlide(e)
{
if(document.all)e = event;
var id = this.id;
this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '_over.gif';
if(this.id=='arrow_right'){
slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = -1*slideSpeedMultiply;
slideSpeed = Math.max(-10,slideSpeed);
}else{
slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = 1*slideSpeedMultiply;
slideSpeed = Math.min(10,slideSpeed);
if(slideSpeed<0)slideSpeed=10;
}
}

function releaseSlide()
{
var id = this.id;
this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '.gif';
slideSpeed=0;
}

function gallerySlide()
{
if(slideSpeed!=0){
var leftPos = imageGalleryObj.offsetLeft;
leftPos = leftPos/1 + slideSpeed;
if(leftPos>maxGalleryXPos){
leftPos = maxGalleryXPos;
slideSpeed = 0;

}
if(leftPos<minGalleryXPos){
leftPos = minGalleryXPos;
slideSpeed=0;
}

imageGalleryObj.style.left = leftPos + 'px';
}
setTimeout('gallerySlide()',20);

}

function showImage()
{
if(activeImage){
activeImage.style.filter = '';

}
this.style.filter = '';
activeImage = this;
}

function initSlideShow()
{
document.getElementById('arrow_left').onmousemove = startSlide;
document.getElementById('arrow_left').onmouseout = releaseSlide;
document.getElementById('arrow_right').onmousemove = startSlide;
document.getElementById('arrow_right').onmouseout = releaseSlide;

imageGalleryObj = document.getElementById('theImages');
imageGalleryLeftPos = imageGalleryObj.offsetLeft;
imageGalleryWidth = document.getElementById('galleryContainer').offset Width - 80;
maxGalleryXPos = imageGalleryObj.offsetLeft;
minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
for(var no=0;no<slideshowImages.length;no++){
slideshowImages[no].onmouseover = showImage;
}

var divs = imageGalleryObj.getElementsByTagName('DIV');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='imageCaption')imageGallery Captions[imageGalleryCaptions.length] = divs[no].innerHTML;
}
gallerySlide();
}

function showPreview(imagePath,imageIndex){
var subImages = document.getElementById('previewPane').getElements ByTagName('IMG');
if(subImages.length==0){
var img = document.createElement('IMG');
document.getElementById('previewPane').appendChild (img);
}else img = subImages[0];

if(displayWaitMessage){
document.getElementById('waitMessage').style.displ ay='inline';
}
document.getElementById('largeImageCaption').style .display='none';
img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
img.src = imagePath;

}
function hideWaitMessageAndShowCaption(imageIndex)
{
document.getElementById('waitMessage').style.displ ay='none';
document.getElementById('largeImageCaption').inner HTML = imageGalleryCaptions[imageIndex];
document.getElementById('largeImageCaption').style .display='block';

}
window.onload = initSlideShow;
 
Hier heb ik wel even tijd voor nodig.
(zit morgen zaterdag in een begrafenis in de familie)

Greetz : Jer:cool:en.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan