I have a banner made out of JavaScript wherein when you hover a particular text the image in the banner changes.
I was wondering how to make it compatible in ie8..
I used this tutorial to come up with the js:
http://www.javascriptkit.com/script/script2/rolldifferent.shtml
I'm also trying to mouse out too then the image will change.
Here are the js codes:
<script type="text/javascript">function changeimage(towhat,url){if (document.images){document.images.targetimage.src=towhat.src gotolink=url}}functionwarp({window.location=gotolink}</script>
<script>var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=newImage()myimages[i].src=preloadimages.arguments[i]}}preloadimages("map_wm_hover.gif", "map_wm_hover2.gif","map_wm.gif")</script>
Here is the css:
<div id="base"><div id="mapcontainer"><img src="map_wm.gif" name="targetimage" border=0></div>
<div id="textcontainer"><div class="textboxinner1">8CCC REQUESTS/TALKBACK</div>
<div class="textboxinner2">Alice Springs 8952 7771</div>
<div class="textboxinner2">Tenant Creek 8952 7182</div>
<div class="textboxinner3"><span class="t3nonelink">...other contact details here</span></div>
I believe this is an issue with IE where animated gifs are not loaded properly in javascript. A workaround is to put the images in a hidden div in the HTML code instead of loading them in the script. A positive side-effect is that this greatly simplifies the javascript. See http://jsfiddle.net/5pZLT/7
HTML:
<DIV id=base>
<DIV id=mapcontainer><IMG border=0 name=targetimage src ="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif"> </DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1><A onmouseover=changeimage(2,this.href)
href="index.html">8CCC REQUESTS/TALKBACK</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(1,this.href)
href="index.html">Alice Springs 8952 7771</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(0,this.href)
href="index.html">Tenant Creek 8952 7182</A> </DIV>
<DIV class=textboxinner3><SPAN class=t3nonelink>...other contact details <A
onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV></DIV></DIV><div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
By the way there were lots of ;s missing in your original code which would tend to stop it working.
Related
Im working on a flipbook, and im trying to make my script load when second pages is visible. What i have tried right now is
With if ($('#bubble').is(':visible')) added the bubble script still loads even when i am not on the right page.
Javascript
if ($('#bubble').is(':visible')) {
$(document).ready(function() {
$('.small').fadeOut(1);
$('.small').removeClass('hidden');
$(".small").delay(1000).fadeIn(2000);
});
$(document).ready(function() {
$('.big').fadeOut(1);
$('.big').removeClass('hidden');
// $('.big').fadeIn(1500);
$(".big").delay(2000).fadeIn(2000);
});
$(document).ready(function() {
$('.test').fadeOut(1);
$('.test').removeClass('hidden');
$(".test").delay(3000).fadeIn(2000);
});
}
HTML
<div class="bb-item" id="bubble">
<img class="fixedsize" src="images/1.png" alt="image02" /></a>
<div class="test">
<div class="oval-thought">
<p>Text inside bubble</p>
</div>
</div>
<div class="small">.</div>
<div class="big">.</div>
</div>
I'm trying to remove the src values from all my iframes and then on click load the srcs to the ones matched by a selector.
Right now I have a block of code that empties the src of my iframes and creates a variable with the src info.
After that I'm trying to check if an iframe src is empty and if so, have a function that on click of a link will add the corresponding src values to the returned iframes.
The code is as follows, but the click part is not working.
Naturally I'm not sure about the IF part, as well, since the thing as a whole is not working.
$j=jQuery.noConflict();
var iframesa = $j('iframe');
iframesa.each(function() {
var srca = $j(this).attr('src');
$j(this).data('src', srca).attr('src', '');
});
$j(document).ready(function(){
if($j('iframe').attr('src') == '') {
$j('.evento-more').click(function() {
$j(this).next().children('iframe').attr('src', function() {
return $j(this).data('src');
});
});
}
});
The HTLM structure is something like this
<div class="evento-feed">
<div class="wrapper">
More
<div class="evento-desc">
<div class="slide-text">
<p>
<iframe src="https://www.youtube.com/embed/xxxx"></iframe>
</p>
</div>
<div class="slide-text">
<p>
<iframe src="https://www.soundcloud.com/embed/xxxx"></iframe>
</p>
</div>
</div>
</div>
</div>
<div class="evento-feed">
<div class="wrapper">
More
<div class="evento-desc">
<div class="slide-text">
<p>
<iframe src="https://www.mixcloud.com/embed/xxxx"></iframe>
</p>
</div>
</div>
</div>
</div>
And so on. The whole .evento-feed block gets repeated a few more times, although the content may vary
Is there anyone that can help me?
I have:
<div id="tweeter">
<div id="tweet1" class="tweet" name="0">
<div class="tweetimg">
<img src="/img/none.jpg" id="img" class="img"></img>
</div>
<div class="tweetname">Please enable Javascript</div>
<div class="tweetcontent"></div><div class="tweettime"></div>
</div>
<div id="tweet2" class="tweet" name="0">
<div class="tweetimg">
<img src="/img/none.jpg" id="imgzwei" class="img"></img>
</div>
<div class="tweetname">Please enable Javascript</div><div class="tweetcontent"></div>
<div class="tweettime"></div>
</div>
<div id="tweet3" class="tweet" name="0">
<div class="tweetimg">
<img src="/img/none.jpg" id="imgdrei" class="img"></img>
</div>
<div class="tweetname">Please enable Javascript</div>
<div class="tweetcontent"></div>
<div class="tweettime"></div>
</div>
</div>
and:
var imgone="img/ico1.jpg";
var imgtwo="img/ico2.jpg";
var imgthree="img/ico3.jpg";
jQuery("#img").attr('src',imgone);
jQuery("#imgzwei").attr('src',imgtwo);
jQuery("#imgdrei").attr('src',imgthree);
It works fine on Chrome but on IE it can't find ico2.jpg and ico3.jpg
Does anyone know of a fix?
A bit wierd but this might help (notice leading slash):
var imgone="./img/ico1.jpg";
var imgtwo="./img/ico2.jpg";
var imgthree="./img/ico3.jpg";
jQuery("#img").attr('src',imgone);
jQuery("#imgzwei").attr('src',imgtwo);
jQuery("#imgdrei").attr('src',imgthree);
You're using "slightly" different urls in your image tags (starting with "/") as those you're using in your javascript code.
Try it with the missing "/":
var imgone = '/img/ico1.jpg';
My IE is ok with your code. which version of IE r u using?
Maybe you can try this way: put 3 img element with style="display:none" in your dom, and their src is those 3 pic. Then change your elem's src to the hidden elem's src.
like this:
HTML:
<img src="/img/ico2.jpg" id="hid2" style="display:none"></img>
<img src="/img/ico3.jpg" id="hid3" style="display:none"></img>
JS:
jQuery("#img").attr('src',$('#hid2').attr('src'));
jQuery("#imgzwei").attr('src',$('#hid2').attr('src'));
I need to achieve this effect
but I need to replace images by container (div)
something like:
<div id="myGallery">
<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" />
<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" />
<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" />
<img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" />
</div>
by
<div id="myGallery">
<div id="item1">contenido uno</div>
<div id="item2">contenido dos</div>
<div id="item3">contenido tres</div>
<div id="item4">contenido cuatro</div>
</div>
any ideas or any plugin?
Take a peek at this demo – it looks like it does what you want, and it shouldn't be too hard to modify the ideas from it for your purposes.
I'd like for the page to open at a certain div halfway down the page, not at the top...
I have something like:
<div id="d1">
<div id="d2">
<div id="d3">
<div id="d4">
<div id="d5">
<div id="d6">
How can I get the page to open at #d4, instead of the top? (Besides adding #d4 to the end to the URL...)
I imagine there must be some easy way to do this, but I can't figure out how to go at searching for a solution! HTML, javascript? Any help is greatly appreciated.
<script>
function ScrollToElement(theElement){
var selectedPosX = 0;
var selectedPosY = 0;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
window.scrollTo(selectedPosX,selectedPosY);
}
</script>
http://radio.javaranch.com/pascarello/2005/01/09/1105293729000.html
Find div position using this
and then use the following javascript command:
window.scroll(0, DIV_POS); // horizontal and vertical scroll targets
EDIT: OOPS! didn't read the Except.... disregard!
Note to self, read the entire question before responding!
End EDIT
You could always use an HTML anchor tag
<a name="d1" />
<div id="d1">
<a name="d2" />
<div id="d2">
<a name="d3" />
<div id="d3">
<a name="d4" />
<div id="d4">
<a name="d5" />
<div id="d5">
<a name="d6" />
<div id="d6">
When you navigate to the page, you would include the anchor name in the url:
pagename.htm#d4
Make sure to close your div tags.
Good luck,
Patrick
You can use Javascript:
location.replace('#d4');