I'm an intern and am actually looking for someone to help me work this entire project, I mean if the forum is willing to do it for free that's excellent, but I could offer some form of compensation (for doing my job haha)
Essentially my goal was to create a changing image on the index, and have an overlapping semi transparent bar on the right. The image and the bar/text/link all need to change simultaneously, and I have (thus far) gotten the image to change using the following;
http://jonraasch.com/blog/a-simple-jquery-slideshow
So, I use all their javascript etc.
How exactly can I get a div box over the image?
The city image is position absolute, and the z-index doesn't work worth jack to get another one over it. Or perhaps that's caused by the changing nature of the code. (the transitions)
I also tried using a float & relative positioning with a left: -px, that wouldn't work, but I may have done something wrong...
NOTES:
I need an additional image overtop (the title "Unrivaled Strategy")
The "[read more]" needs to be the only clickable portion.
2 Possibilities:
A)The box is simply a transparent portion of the city image, the text overlaps on the right.
B)The box is the second div and has a semi transparent background....
All the Coding is Available here,
Quote:
HTML Java Inscribe:
Code:
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
HTML Div:
Code:
<div id="slideshow">
<div class="active">
<a href="google.com/"><img src="OPF/BG/b1.jpg" alt="Slideshow Image 1" /></a>
</div>
<div>
<a href="google.com/"><img src="OPF/BG/b2.jpg" alt="Slideshow Image 2" /></a>
</div>
CSS Controls:
Code:
#slideshow {
position:relative;
height:484px;
margin-left:10px;
}
#slideshow DIV {
position:absolute;
top:0px;
left:0px;
z-index:8;
opacity:0.0;
height: 484px;
background-color: #FFF;
}
#slideshow DIV.active {
z-index:10;
opacity:1.0;
}
#slideshow DIV.last-active {
z-index:9;
}
#slideshow DIV IMG {
height: 484x;
display: block;
border: 0;
}
|
Thank you so much in advance! Let me know if you want to work with me also.
Before you post, read our: 
