Pb Affichage infobulle avec Image sous IE
ragmo
Messages postés
10
Date d'inscription
mercredi 24 novembre 2004
Statut
Membre
Dernière intervention
16 juillet 2009
-
13 juil. 2009 à 21:22
sltcoach Messages postés 1 Date d'inscription dimanche 2 février 2003 Statut Membre Dernière intervention 28 juillet 2009 - 28 juil. 2009 à 17:00
sltcoach Messages postés 1 Date d'inscription dimanche 2 février 2003 Statut Membre Dernière intervention 28 juillet 2009 - 28 juil. 2009 à 17:00
A voir également:
- Pb Affichage infobulle avec Image sous IE
- Convolution image - Conseils pratiques -Java
- Fpdf image - Forum PHP
- Image en tiff ✓ - Forum C# / .NET
- Change image png - Forum Visual Basic 6
- Rogner image css ✓ - Forum Javascript / DHTML
1 réponse
sltcoach
Messages postés
1
Date d'inscription
dimanche 2 février 2003
Statut
Membre
Dernière intervention
28 juillet 2009
28 juil. 2009 à 17:00
28 juil. 2009 à 17:00
Car quand tu passes sur ton image, ton infobulle passe dessus donc tu n'es plus sur ton image donc l'infobulle disparait donc tu es sur ton image et l'infobulle apparait... ainsi de suite d'ou l'effet de clignotement...
Fabrique cela plus comme ça :
HTML :
AVANT LE :
JAVASCRIPT :
<script>var noPicture = false;</script>
<script src="../js/filesearchhover.js" language="Javascript" type="text/javascript"></script>
DANS LE FILE SEARCHHOVER.JS
var itemWidth = 350;
var offsetfrommouse=[15,15]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400; // maximum image size.
//if (document.getElementById || document.all){
// document.write('
');
// document.write('
');
//}
function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}
function gettrailobjnostyle(){
if (document.getElementById)
return document.getElementById("trailimageid")
else if (document.all)
return document.all.trailimagid
}
function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function showtrail(imagename,title,description,showthumb,height, newItemWidth){
if (newItemWidth != false) {
itemWidth = newItemWidth;
}
if (height > 0){
currentimageheight = height;
}
document.onmousemove=followmouse;
cameraHTML = '';
newHTML = '
';
newHTML = newHTML + '
';
if (showthumb > 0){
newHTML = newHTML + '
' + title + '
';
}
newHTML = newHTML + '
';
gettrailobjnostyle().innerHTML = newHTML;
gettrailobj().visibility="visible";
}
function showhtml(newHtml,height) {
document.onmousemove=followmouse;
newHtml = '
' + newHtml + '
';
gettrailobjnostyle().innerHTML = newHtml;
gettrailobj().visibility="visible";
}
function hidetrail(){
gettrailobj().visibility="hidden"
document.onmousemove=""
gettrailobj().left="-500px"
}
function followmouse(e){
var xcoord=offsetfrommouse[1]
var ycoord=offsetfrommouse[0]
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)
if (typeof e != "undefined"){
if (docwidth - e.pageX < itemWidth + 50){
if (noPicture == "yes") {
xcoord = e.pageX - xcoord - itemWidth; // Move to the left side of the cursor
} else {
xcoord = e.pageX - xcoord - itemWidth; // Move to the left side of the cursor
}
} else {
xcoord += e.pageX;
}
if ((docheight - e.pageY) < (currentimageheight + 110)){
ycoord += e.pageY - Math.max(0,(110 + currentimageheight + e.pageY - docheight - truebody().scrollTop));
} else {
ycoord += e.pageY;
}
} else if (typeof window.event != "undefined"){
if (docwidth - event.clientX < itemWidth + 50){
if (noPicture == "yes") {
xcoord = event.clientX + truebody().scrollLeft - xcoord - itemWidth; // Move to the left side of the cursor
} else {
xcoord = event.clientX + truebody().scrollLeft - xcoord - itemWidth; // Move to the left side of the cursor
}
} else {
xcoord += truebody().scrollLeft+event.clientX
}
if (docheight - event.clientY < (currentimageheight + 110)){
ycoord += event.clientY + truebody().scrollTop - Math.max(0,(110 + currentimageheight + event.clientY - docheight));
} else {
ycoord += truebody().scrollTop + event.clientY;
}
}
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}
Voila normalement tout doit fonctionner... A toi de regarder pour le CSS en fonction des classes.
Bon courage
Fabrique cela plus comme ça :
HTML :
AVANT LE :
JAVASCRIPT :
<script>var noPicture = false;</script>
<script src="../js/filesearchhover.js" language="Javascript" type="text/javascript"></script>
DANS LE FILE SEARCHHOVER.JS
var itemWidth = 350;
var offsetfrommouse=[15,15]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400; // maximum image size.
//if (document.getElementById || document.all){
// document.write('
');
// document.write('
');
//}
function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}
function gettrailobjnostyle(){
if (document.getElementById)
return document.getElementById("trailimageid")
else if (document.all)
return document.all.trailimagid
}
function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function showtrail(imagename,title,description,showthumb,height, newItemWidth){
if (newItemWidth != false) {
itemWidth = newItemWidth;
}
if (height > 0){
currentimageheight = height;
}
document.onmousemove=followmouse;
cameraHTML = '';
newHTML = '
';
newHTML = newHTML + '
';
if (showthumb > 0){
newHTML = newHTML + '
' + title + '
';
}
newHTML = newHTML + '
';
gettrailobjnostyle().innerHTML = newHTML;
gettrailobj().visibility="visible";
}
function showhtml(newHtml,height) {
document.onmousemove=followmouse;
newHtml = '
' + newHtml + '
';
gettrailobjnostyle().innerHTML = newHtml;
gettrailobj().visibility="visible";
}
function hidetrail(){
gettrailobj().visibility="hidden"
document.onmousemove=""
gettrailobj().left="-500px"
}
function followmouse(e){
var xcoord=offsetfrommouse[1]
var ycoord=offsetfrommouse[0]
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)
if (typeof e != "undefined"){
if (docwidth - e.pageX < itemWidth + 50){
if (noPicture == "yes") {
xcoord = e.pageX - xcoord - itemWidth; // Move to the left side of the cursor
} else {
xcoord = e.pageX - xcoord - itemWidth; // Move to the left side of the cursor
}
} else {
xcoord += e.pageX;
}
if ((docheight - e.pageY) < (currentimageheight + 110)){
ycoord += e.pageY - Math.max(0,(110 + currentimageheight + e.pageY - docheight - truebody().scrollTop));
} else {
ycoord += e.pageY;
}
} else if (typeof window.event != "undefined"){
if (docwidth - event.clientX < itemWidth + 50){
if (noPicture == "yes") {
xcoord = event.clientX + truebody().scrollLeft - xcoord - itemWidth; // Move to the left side of the cursor
} else {
xcoord = event.clientX + truebody().scrollLeft - xcoord - itemWidth; // Move to the left side of the cursor
}
} else {
xcoord += truebody().scrollLeft+event.clientX
}
if (docheight - event.clientY < (currentimageheight + 110)){
ycoord += event.clientY + truebody().scrollTop - Math.max(0,(110 + currentimageheight + event.clientY - docheight));
} else {
ycoord += truebody().scrollTop + event.clientY;
}
}
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}
Voila normalement tout doit fonctionner... A toi de regarder pour le CSS en fonction des classes.
Bon courage
