|
JavaScript - Use Onmouseover To Change Content Of Iframe
hi all,
I really need help with this topic. I have to use onMouseOver to change the content of an iframe. I'm trying to use an array but I'm confused and I'm not really sure if what I'm doing is correct and it doesnt work. I will appreciate your help and understanding. Thanks a lot! here is part of my code.. var frame=new Array(6); frame[0]="page1.html"; frame[1]="page2.html"; frame[2]="page3.html"; frame[3]="page4.html"; frame[4]="page5.html"; frame[5]="page6.html"; var j=0; function nextFrame() { if (j < 5) { j++; document.getElementById(frame).contentDocument=frame[j]; } return; } <span onMouseOver="nextFrame()" > <img name="upperImage" src="something.jpg" width=350 height=250 /></span> <iframe id="frame1" name="frame1" src="" width=350 height=250 frameborder="0"> </iframe> Please let me know if at least I'm in the right track. Thanks Similar TutorialsThe project I am working on involves a flash piece that communicates with a iframe. Currently the flash piece just calls on javascript functions. I want the buttons in the flash piece to be able to change the src of the iframe. PHP Code: <script type="text/javascript"> document.getElementById('video').setAttribute('src',address2); function closeVideo() { document.getElementById('video').style.height='0px'; return false; document.getElementById('video').setAttribute('src', address2); } function openVideo() { document.getElementById('video').style.height='391px'; return false; document.getElementById('video').setAttribute('src', address); } </script> So the way the code works now is when the page loads it sets the iframe with the id of 'video' to the variable address2 which it pulls from an XML file. In the flash piece when a button is hit, it calls openVideo() which "opens" the iframe and I want it to change the contents to address. This does not work though. It opens the frame but will not change the src. I've tried a bunch of different things now such as make the flash target the iframe using navigateToURL(request1, 'video'); but in Firefox and IE is opens it stills as if I had _blank in there. It does strangely work in Safari. Any ideas how to get this to work? I'm new to javascript so it could be something basic I'm overlooking hi ! i have a div which some how i make when mouseover it become cursor and link to other page i wants to, and it has also some text inside of it which is also linked to other page and when mouseover on text it change colors too, but the problem is if mouse come on div it will not change the color of text inside of div, so what i wants is it will change the color of text too when mouseover on the div, here is code i am using: Code: <-- THIS IS IN CSS file -->
div.test{
position:relative;
font-family:Arial;
font-size: 12px;
padding-left: 82px;
padding-top: 47px;
width: 162px;
padding-bottom: 15px;
cursor:pointer;
cursor:hand;
}
div.test a{
color:#000;
text-decoration: none;
}
div.test a:hover{
color:#4E6D00;
text-decoration: none;
}
<-- THIS IS IN HTML file -->
<div onClick="document.location='otherpage.html';" class="test">
<a href="otherpage.html">here is all content,This is content hyperlinked</a>
</div>
you notice i am using cursor in css so when mouseover it becomes hand, what i wants is when it will become hand the text inside of it will also change the color, for now it change only if i mouseover to that text, thanks for any quick help please Hey, I currently have my menu on a web page set out using the following method: Code: <div class="linkbox" onmouseover="this.className='linkbox2'" onmouseout="this.className='linkbox'" onclick="location.href='http://www.upthegame.net/';"> General Chat </div> I was wondering if there was a way using javascript to set ALL <div>'s with the class name "linkbox" to change to the class name "linkbox2" onmouseover and return to "linkbox" onmouseout. I would like this to be in a seperate file, I'm guessing this would probably be within an onload function or something along those lines. I'm only familiar with basic JS so please go easy on me Any help is much appreciated. Thanks, Tom. Hi everyone. Can anyone help me , i need to make a onmouseover function , when u go with mouse on the left small image it automatically opens the large image in the right, can anyone help me with this ??? i am trying to use the most simple code i can to onmouseover of some text change 1 image. it will have multiple texts with different images for each one all displayed in one place. it seems to work well for me in IE, but on firefox the mouseover doesn't work. and on a mac it doesn't work in safari or firefox. any input is appreciated... here is the shortest version of the code i could put together. Code: <head>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function roll(img_name1, img_src1)
{
document[img_name1].src = img_src1;
}
//-->
</SCRIPT>
</head>
<body>
<a href="2_17_10/index.html" onmouseover="roll('poster','2_17_10/IMG_7075b.jpg')">2-17-10</a>
<img src="2_16_10/IMG_7072.jpg" name="poster" width=500></img>
</body>
</html>
Hi, what I want to do is create a menu with rollover buttons but each button also changes the background image of a div. I've managed to change the colour of the div but not add an image there. I've added my code so you can have a look. Case 0 shows me attempting to change the background image. I must be doing something wrong. I've left the other cases as colours so you can see how I did that. I eventually want it all to be images. I'm creating a Joomla website (not sure if that makes a difference). Code: <body onload="addHandlers()">
<script type="text/javascript" language="javascript">
function addHandlers(){
var allMenus = document.getElementById("services_menu").getElementsByTagName("li");
for(var k = 0; k < allMenus.length; k++)
{
allMenus[k].setAttribute('onmouseover', 'ChangeContentBg('+ k + ')' );
allMenus[k].setAttribute('onmouseout', 'Reset()');
}
}
</script>
<script type="text/javascript">
function ChangeContentBg(i)
{
var Num = parseInt(i);
var ContentDiv = document.getElementById("content");
switch(Num)
{
case 0:
ContentDiv.style.background-image = 'url(../images/waxingtinting_rollover_image.jpg)';
break;
case 1:
ContentDiv.style.backgroundColor = 'red';
break ;
case 2:
ContentDiv.style.backgroundColor = 'purple';
break ;
case 3:
ContentDiv.style.backgroundColor = 'green';
break ;
case 4:
ContentDiv.style.backgroundColor = 'yellow';
break ;
/*For each new color you would have to add a new case and change ChangeContentBg() parameter , to the case you want in <li> tag*/
}
}
function Reset()
{
document.getElementById("content").style.backgroundColor = '';
}
</script>
Hi not really used to java but have an image map with about 90 hotspots. All i want to do is simply change the color of a hotspot when the mouse rolls over. I have really only been able to find solutions for introducing images on mouse over. Any help appreciated thanks Hi guys, I need some help. Im trying to make a navagation menu with images that need to be changed when someone hovers over the child category. So lets say I have a menu that looks like this: Code: <img src="notactiveimagemenu1.jpg" alt=""> <ul id="menu1"> <li>link</li> <li>link</li> <li>link</li> </ul> <img src="notactiveimagemenu2.jpg" alt=""> <ul id="menu2"> <li>link</li> <li>link</li> <li>link</li> </ul> Now what im trying to do is if someone hovers over the li items from menu1 to change the image src of menu1.jpg to active. I was hoping to do this with some javascript. Code: // i was thinking about something like this: // first put menu items in a array // then use document.getElementById(id).onmouseover = function() // and make some sort of check to see which src should be changed. Now I really have no clue how to do it. So if anyone knows a cool solution please let me know. I know I could add onmouseover events to each li item and changing the src of the category. But Im trying to find a better solution. And I think I should be able to use document.getElementById(id).onmouseover = function() for that. Anyway thanks for any tips. Please note I know I could use jquery to do all of this very easy but I consider this practice because I don't know that much javascript. Hi, I'm trying to get the pic to change when the mouse rolls over the button. I used this template of code and it works: Code: <A HREF="http://www.cnn.com" onMouseOver="document.pic1.src='menu1on.gif'" onMouseOut="document.pic1.src='menu1off.gif'"> <IMG SRC="menu1off.gif" BORDER=0 NAME="pic1"> </a> The problem occurs when I attempt to change a *second button* to have two buttons change on the same page. Here is how the code for two buttons looks side by side while it works: Code: <a href="development.html"> <img height="20" src="http://mywebsite.com/SIDE4H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a><br /> <a href="exhibitions.html"> <A HREF="" onMouseOver="document.pic1.src='SIDE5H2.png'"onMouseOut="document.pic1.src='SIDE5H.png'"><IMG SRC="http://mywebsite.com/SIDE5H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br /> Here is the code after I add the javascript to two buttons. When I do this the buttons *do not* change (switch images), but do display one image properly on the site: Code: <a href="development.html"> <img height="20" src="http://mywebsite.com/SIDE4H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a><br /> <a href="exhibitions.html"> <A HREF="" onMouseOver="document.pic1.src='SIDE5H2.png'"onMouseOut="document.pic1.src='SIDE5H.png'"><IMG SRC="http://mywebsite.com/SIDE5H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br /> <a href="careers.html"> <A HREF="" onMouseOver="document.pic1.src='SIDE6H2.png'"onMouseOut="document.pic1.src='SIDE6H.png'"><IMG SRC="http://mywebsite.com/SIDE6H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br /> <a href="contactus.html"> <img height="20" src="http://mywebsite.com/SIDE7H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a></td> <td colspan="2" style="height: 148px"> </td> <td style="width: 148px; height: 148px"> Any ideas? I hope the code displays ok on your screen. Hello everybody! This is my first post at CodingForums! I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin. The structu I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post. What I want to do is: when the user hovers over (OnMouseOver) "post" div: ".title" spans's background color fades from black to red. when the user hovers out (OnMouserOut) "post" div: ".title" spans's background color fades back to black. The Code Code: $j(document).ready(function(){
$j(".posts").hover(function(){
$j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
},function(){
$j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
});
});
The Problem The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state? Any help would be greatly appreciated, Cheers, Drew. I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that. This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox): Code: function getSize()
{
alert('height is now '+document.getElementById("Iframemain").height)
alert('height is now '+document.getElementById("Iframemain").width)
}
Is it possible? I want to change iframe.src value? So I use following code,when I click 'Click here',I find the iframe don't go to b.html page,why? Where is error? How to correct my code? Thanks My code is follows: Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('popIframe').style.display='block';
document.getElementById('bg').style.display='block';
document.getElementById('popIframe').src='b.html';
}
</script>
</head>
<body>
<div id="popDiv" class="mydiv" style="display:none;">This is a test
<div id="bg" class="bg" style="display:none;"></div>
<a href="javascript:showDiv()">Click here</a>
<iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>
</body>
</html>
What wrong in this code? Code: <script type="text/javascript" src="jquery.js"></script>
<script>
$(function (){
function manda(){
var text = $('#frame').contents().find('p[class=no_boder]').html();
$('div').html(text);
}
});
</script>
i've already tried using this -> $('#frame').contents().html(); How can i get the content? Hi there, I'm working on a site: ocmd.co.nr And it features a lot of handy little web gadgets and apps for users. I was interested in creating a page, where two iframes are shown side-by-side both with the width of 50% and the height of 100%, with adressbars on top of each of them. So, essentially, what I need is just a code that allows the user to edit the iframe's src and get it to a different site. Good Day Everyone, I need some help resizing an iframe to fit it's content. Basically, I have 10 spreadsheet pages saved as htm files. I am creating a page that enables me to view each of these htm files. I need the iframe to be resized for each htm file. This is my code: Code: <html>
<head>
<script language="javascript">
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
function autoResize(id)
{
var winW = 0, winH = 0 ;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth - 235;
winH = document.getElementById('page').contentWindow.document.body.scrollHeight;
}
document.getElementById(id).height=(winH) + "px"; document.getElementById(id).width=(winW) + "px";
}
//-->
</script>
<style type="text/css">
.yssOver{background-color:#ffffff;}
.yssOut{ background-color:#E6EFFF;}
#content {
position:absolute;
left:210px;
top:40px;
}
html {
overflow:off;
}
img {
display:block;
vertical-align:text-top;}
h1{
color: #000000;
font-family:"Arial",Times,sans-serif;
font-weight:bold;
font-size:12px;
margin-bottom:0px;
}
#document{
position:absolute;
top:0px;
left:0px;
}
#menu{
margin: 0 0 0 0;
padding-left:0px;
border: 0 -10 0 0;
}
img.arrow {
margin: 4 0 0 0;
}
table.menu td { border: 1px solid; border-color:#7D91D0; }
table.div td { border: 0px solid; border-color:#7D91D0; }
a:link {color: #000000; font-family:"Arial",Times,sans-serif; font-size:12px; text-decoration: none;}
a:active {color: #000000; font-family:"Arial",Times,sans-serif; font-weight:bold; font-size:12px;}
a:visited {color: #000000; font-family:"Arial",Times,sans-serif; text-decoration: none; font-size:12px;}
a:hover {color: #000000; font-family:"Arial",Times,sans-serif; font-size:12px;}
</style>
</head>
<body onLoad = "window.frames['page'].location = 'home.png'" >
<table id=document border=0 cellpadding=0 cellspacing=0>
<tr><td>
<img src=halifax_logo.png></img>
</td><td width=100%>
<img src=headerback.png width=100% height=80></img>
</td></tr>
<tr><td>
<table width=95% class=menu border=1 id=menu border=0 cellpadding=0 cellspacing=5 background=menuback.png>
<tr><td>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="cofunds designations.htm" target="page"> Cofunds Designations</a>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="Commission Codes Most Used.htm" target="page" " height=516 width=974 onmousedown="if(document.getElementById('div2').style.display == 'none'){ document.getElementById('div2').style.display = 'block'; }else{ document.getElementById('div2').style.display = 'none'; }"> Commission Codes</a>
<div id="div2" style="display: none;">
<table class=div border=0 cellpadding=0 cellspacing=0 style=background-color:#E6EFFF; border: 1px solid; border-color:#7D91D0; width=100%>
<tr><td>
<img class=arrow src=side_grey_arrow.png></img>
</td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';">
<a href="Commission Codes Most Used.htm" target="page">Most Used</a>
</td></tr>
<tr><td valign=top>
<img class=arrow src=side_grey_arrow.png></img>
</td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';">
<a href="Commission Codes.htm" target="page">All</a>
</td></tr>
</table>
</div>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="corporate accounts1.htm" target="page"> Corporate Accounts</a>
<div id="div3" style="display: none;">
<table class=div border=0 cellpadding=0 cellspacing=0 style=background-color:#E6EFFF; border: 1px solid; border-color:#7D91D0; width=100%>
<tr><td>
<img class=arrow src=side_grey_arrow.png></img>
</td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';">
<a href="research.png" target="page">Research Centre</a>
</td></tr>
<tr><td valign=top>
<img class=arrow src=side_grey_arrow.png></img>
</td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';">
<a href="reports.png" target="page">Company Reports</a>
</td></tr>
</table>
</div>
<tr><td class=menutd background=tdback.png>
<a href="dealers.htm" target="page"> Dealers</a>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="halifax funds.htm" target="page"> Halifax Fund Managers</a>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="other fund managers.htm" target="page"> Other Fund Managers</a>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="international codes.htm" target="page"> International Codes</a>
</td></tr>
<tr><td class=menutd background=tdback.png>
<a href="market makers1.htm" target="page"> Market Makers</a>
</td></tr>
<tr><td height=750>
</table>
</td><td>
<div id=content>
<IFRAME name=page src="cofunds designations halifax.htm" onLoad="autoResize('page');" frameborder=0 overflow=no marginwidth=0 marginheight=0></iframe>
</div>
</td></tr>
</table>
</body>
</html>
This seems to work but it has a few issues, It does not resize properly for every link, only some of them. Can somebody please have a look & tell me where I am going wrong, or provide me with some better code, mine is a bit shoddy! Thanks Harry Hi all, I have: Code: var moreinfo ="";
moreinfo+= "here some content";
$("#divMoreInfo").html(moreinfo);
And this inserts "here some content" in a div called divMoreInfo. Now divMoreInfo is placed inside an iframe while the rest of the programming has to be in the parent page... How do I insert moreinfo's contents in the iframe's div?? Thanks a lot Try to figure out how to change the css display property of a table, from hidden, to block outside of an iframe. //This data is outside of the iframe Code:
<style>
#table {display: hidden; z-index: 100;}
</style>
<table id='table' ><td> ......data</td></table>
//This link is inside of an iframe Code: <script>
function change(){
document.getElementById("table").style.display='block';
}
</script>
<a href='javascript:void(0)' onclick='change()'>Change</a>
Hi all, I want to write i frame content to PDF file.Can any one help me how to do it In my page, I have a main iframe where I want all the content of my links to be loaded. I want the iframe's height to resize according to the content. All the linked pages are in the same domain. I have tried some scripts I found, but nothing has the result I want. The HTML code is: Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>index</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"></div> <div id="nav"> <a href="home.html" target="frame">Home</a> <a href="the_band.html" target="frame">The Band</a> <a href="News.html" target="frame">News</a> <a href="gallery.html" target="frame">Gallery</a> <a href="contact.html" target="frame">Contact</a> </div> <iframe id="frame"></iframe> <div id="footer"></div> </div> </body> </html> The CSS code is: Code: div#container {
height: 100%;
width: 100%;
}
div#header {
top: 0px;
width: 100%;
height: 80px;
position: fixed;
background-color: transparent;
text-align: center;
}
div#nav {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
top: 120px;
width: 100%;
height: 40px;
position: fixed;
text-decoration: none;
font-weight: bolder;
font-variant: normal;
}
div#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
bottom: 0px;
position: fixed;
height: 30px;
width: 100%;
text-align: center;
color: #fff;
}
#frame {
position: absolute;
top: 200px;
bottom: 40px;
width: 800px;
border: none;
left: 120px;
height: auto;
}
a:link {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:visited {
font-family: MgSouvenirLight;
font-size: 18pt;
color: #FF0;
}
a:hover {
font-family: MgSouvenirLight;
font-size: 18pt;
font-style: italic;
color: #FC0;
}
I don't know how to make scripts on my own, so I would appreciate any help. Thank you! |
|||||||