|
Transparent border IE in div/slideshow
07-16-2010, 03:16 AM
|
Transparent border IE in div/slideshow
|
Posts: 8
|
Hi all,
I have a question regarding transparency in IE. Below a link to the site I'm talking about;
http://www.mbarch.nl/new/
I'd like to make the bordercolor change when you rollover a projectimage. (like the ones on the right, when you hover, the transparent border turns yellow). (class: bordered)
However, when I'm trying to do this on one of the slideshows (4 divs on the left), in IE, the transparent border turns white. In FF and Safari, this works fine.
Below a part of the code:
Code:
<!-- slideshow script-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow50').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
delay: 0,
speed: 2000
});
}); </script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow51').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
delay: 1000,
speed: 2000
});
}); </script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow52').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
delay: 2000,
speed: 2000
});
}); </script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow53').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
delay: 3000,
speed: 2000
});
});
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<!-- slideshow script-->
<style type="text/css">
<!--
#projecttitlestart {
position:fixed;
width:500px;
height:15px;
z-index:30;
bottom: 30px;
right: 15px;
}
-->
</style>
<style type="text/css" media="screen">
.style2 {color: #FFFF00}
#projectscroll {
position:absolute;
width:2000px;
height:470px;
top: 80px;
z-index: 10;
background-color: #EEE;
left: -8px;
vertical-align: bottom;
}
#tablewrapper {
position:absolute;
width:2000px;
height:500px;
z-index:1;
left: 15px;
top: 15%;
overflow-y: visible;
}
#pro50 {
position:relative;
z-index:1;
width:180px;
height:115px;
}
#pro51 {
position:relative;
z-index:1;
width:180px;
height:115px;
}
#pro52 {
position:relative;
z-index:1;
width:180px;
height:115px;
}
#pro53 {
position:relative;
z-index:1;
width:180px;
height:115px;
}
</style>
<style type="text/css">
.bordered{
border:2px solid;
border-color: transparent;}
*html .bordered{
border-color: pink;
filter: chroma(color=pink);}
a:hover img.bordered {border: 2px solid #fffc00}
</style>
<title>Möhn + Bouman architecten</title>
</head>
<body onLoad="MM_preloadImages('images/titles/title_048.gif','images/titles/title_068.gif','images/titles/title_074.gif','images/titles/title_064.gif','images/titles/title_045.gif')">
<!-- pagewidth -->
<div id="width">
<table width="2500" height="1" border="0" cellpadding="1">
<tr>
<td> </td>
</tr>
</table>
</div>
<!-- projecten -->
<div id="tablewrapper">
<table width="1000" height="200" border="0" cellspacing="30" cellpadding="0">
<tr>
<td> </td>
<td>
<div class="bordered" id="pro51" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('title_none','','images/titles/title_071.gif',1)">
<div class="slideshow51">
<a href="projects/screen/index.html" title="plaatje 1"><img src= "images/thumbnails/071_01.gif" border="0" /></a>
<a href="projects/screen/index.html" title="plaatje 2"><img src="images/thumbnails/071_02.gif" border="0" /></a> </div>
</div>
</td>
<td> </td>
<td><a href="projects/048/index.html"><img src="images/thumbnails/048_01.gif" width="180" height="115" border="0" class="bordered" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('title_none','','images/titles/title_048.gif',1)"></a></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<div id="pro50" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('title_none','','images/titles/title_074.gif',1)">
<div class="slideshow50">
<a href="projects/screen/index.html" title="plaatje 1"><img src= "images/thumbnails/074_01.gif" border="0" /></a>
<a href="projects/screen/index.html" title="plaatje 2"><img src="images/thumbnails/074_02.gif" border="0" /></a>
</div>
</div>
</td>
<td>
<div id="pro52" class="slideshow52" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('title_none','','images/titles/title_072.gif',1)">
<a href="projects/screen/index.html">
<img src="images/thumbnails/072_01.gif" border="transparent" class="bordered"/></a>
<a href="projects/screen/index.html">
<img src="images/thumbnails/072_02.gif" border="transparent" class="bordered"/></a>
<a href="projects/screen/index.html">
<img src="images/thumbnails/072_03.gif" border="transparent" class="bordered"/></a>
</div>
</td>
<td><a href="projects/068/index.html"><img src="images/thumbnails/068_01.gif" width="180" height="115" border="0" class="bordered" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('title_none','','images/titles/title_068.gif',1)"></a></td>
<td><a href="projects/045/index.html"><img src="images/thumbnails/064_01.gif" width="180" height="115" border="0" class="bordered" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('title_none','','images/titles/title_064.gif',1)"></a></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
</td>
<td>
<div id="pro53" onMouseOver="MM_swapImage('title_none','','images/titles/title_069.gif',1)" onMouseOut="MM_swapImgRestore()">
<div class="slideshow53">
<a href="projects/screen/index.html" title="plaatje 1"><img src="images/thumbnails/069_01.gif" border="0" /></a>
<a href="projects/screen/index.html" title="plaatje 2"><img src="images/thumbnails/069_02.gif" width="180" height="115" border="0" /></a>
</div>
</div>
</td>
<td> </td>
<td> </td>
<td><a href="projects/045/index.html"><img src="images/thumbnails/045_01.gif" width="180" height="115" border="0" class="bordered" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('title_none','','images/titles/title_045.gif',1)"></a></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
I've spent a complete day trying to figure this out, any ideas?
Thank you in advance,
Anja |
|
|
|
|
07-16-2010, 01:57 PM
|
Re: Transparent border IE in div/slideshow
|
Posts: 321
|
I am not sure but I think you must put .bordered class in a tag not in image tag if you want to use a:hover option in IE.
__________________
Please login or register to view this content. Registration is FREE - uncommon free scripts
Please login or register to view this content. Registration is FREE - Städte, Sport, Party, Gourment, Apartments, Hotels
|
|
|
|
|
07-17-2010, 10:23 AM
|
Re: Transparent border IE in div/slideshow
|
Posts: 10,017
Location: Tennessee
|
That is only true in IE6.
The yellow border appears in Ie7.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
07-19-2010, 03:28 AM
|
Re: Transparent border IE in div/slideshow
|
Posts: 8
|
thanks for the response. The hovering actually works. Problem is that it turns from white to yellow instead of transparent to yellow...
|
|
|
|
|
07-21-2010, 03:07 AM
|
Re: Transparent border IE in div/slideshow
|
Posts: 8
|
no one?
|
|
|
|
|
07-21-2010, 09:50 PM
|
Re: Transparent border IE in div/slideshow
|
Posts: 10,017
Location: Tennessee
|
If you're using transparent PNG's IE6 doesn't support it w/o some javascript to force it.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
07-22-2010, 07:14 AM
|
Re: Transparent border IE in div/slideshow
|
Posts: 321
|
Quote:
Originally Posted by LadynRed
If you're using transparent PNG's IE6 doesn't support it w/o some javascript to force it.
|
Lady is right. But I don't understand why you need JavaScript to change something very simple - borders if you can do this with CSS. If I good see, all your images are links (a tag) to some pages. With a:hover you can change border color and solve problem in all browsers.
__________________
Please login or register to view this content. Registration is FREE - uncommon free scripts
Please login or register to view this content. Registration is FREE - Städte, Sport, Party, Gourment, Apartments, Hotels
|
|
|
|
|
07-22-2010, 07:47 AM
|
Re: Transparent border IE in div/slideshow
|
Posts: 8
|
Thanks, the images are not transparent gif/png's however. They are jpgs.
(check latest link on http://www.mbarch.nl/test2/ )
I do use CSS for changing the borders:
Code:
.bordered{
border:2px solid;
border-color: transparent;}
*html .bordered{
border-color: pink;
filter: chroma(color=pink);}
a:hover img.bordered {border: 2px solid #fffc00}
and the javascript you see is for the slideshow effect on some of the images
Code:
<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scripts/imgpreload.js"></script>
<script type="text/javascript" src="scripts/ticker.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.all.2.74.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow50').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
delay: 0,
speed: 2000
});
}); </script>
Thus, there are several things linked to the seperate slideshows. A js-cycle script, and two hover behaviours (swap image with the logo below and the border change by setting the class to 'bordered')
Code:
<div id="pro52" class="slideshow52" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('title_none','','images/titles/title_072.gif',1)">
<a href="projects/072/index.html">
<img src="images/thumbnails/072_01.gif" border="transparent" class="bordered" width="180" height="115"/></a>
<a href="projects/072/index.html">
<img src="images/thumbnails/072_02.gif" border="transparent" class="bordered" width="180" height="115"/></a>
<a href="projects/072/index.html">
<img src="images/thumbnails/072_03.gif" border="transparent" class="bordered" width="180" height="115"/></a>
</div>
Last edited by Anja; 07-22-2010 at 07:50 AM..
|
|
|
|
|
« Reply to Transparent border IE in div/slideshow
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
