|
HTML - Html/javascript Rollover - Any Ideas?
Hi again guys,
I have a new problem this time! On this page on my website: http://www.modular9.co.uk/artists.html I have it that when you rollover a link it changes from the artist's name to the collective name and back again. Obviously this causes a few problems such as the length of 'modular9' is shorter than most names so because they jump up a line when it is rolled-over the whole script freaks out and you get a mess. I was just wondering if you knew of any other better script that would keep the same dimensions of the original text or some other idea you could share? My script for this is: <a href="#" class="links" onclick="MM_openBrWindow('artists/richardcook.html','modular9','scrollbars=yes,width=457,height=600')" onMouseOver="this.innerHTML = 'modular9';" onMouseOut="this.innerHTML = 'richard cook';">richard cook</a> Highlighted red is the main rollover change. Any help/idea would be most appreciated! Thanks again Richard Similar TutorialsHello there, My index page validates completely since I tidied it up using html tidy, but when i run it through browsershots it is still completely broken in firefox, opera, etc. basically anything other than MSIE it displays incorrectly. If anyone could shed any potential light on the situation it would be greatly appreciated. As you can no doubt tell, I'm no expert on creating web pages using html and css and if a page validates but still doesn't work I can't even begin to try and work out what is going on I did run my css through a validator and it came up with 30 or so instances of the same error, I hadn't ended a dimension value with px, i had just left the number, could this be the culprit? I have since corrected my style sheet so that it validates completely but I cannot upload from my FTP on the PC i'm currently using to see if it affects the browsershots results. I just wanted to put it out there and see what the ideas were of people who know a lot more about website building than I do. Bottom line: if i have an html page and a css page that validate 100% using the w3c standard is it guaranteed to work in all browsers, or are there quirky little things I need to be aware of when wanting my site to display correctly in less popular browsers such as safari etc.? Any feedback is greatly appreciated. :-) Sincere thanks in advance, Alex Browser screenshots - http://browsershots.org/http://www.alexhaines.co.uk/ HTML Validity results - http://validator.w3.org/check?uri=http%3A%2F%2Fwww.alexhaines.co.uk%2Findex.html&charset=%28detect+automatically%29&doctype= Inline&group=0 CSS Validity results - http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.alexhaines.co.uk%2Fstyle.css&profile=css21&usermedium=all&warning=1&l ang=en My site - http://www.alexhaines.co.uk Hi everyone, I know how to create a rollover effect with an image... but I believe there is a way to change the rollover color and also changing the color of past paged visited.. so lets say we make an href Quote: <td width="100%" bgcolor="#669999" align="center" height="63" style="border: 2 outset #FFFFFF" bordercolor="#000000"><b><font face="Arial" size="4"><a href="../Projects.htm">Projects</a></font></b></td> is there a way to change the color with a rollover, or maybe add a shadow... i am really rusty with my HTML thank you so much in advance Mel HTML Code: <a href=http://www.ninjahelper.kk5.org onMouseOver= "if (document.images) document.off7.src= 'http://securegames1.weebly.com/uploads/5/5/1/0/5510021/on7.png';" onMouseOut= "if (document.images) document.off7.src= 'http://securegames1.weebly.com/uploads/5/5/1/0/5510021/off7.png';"><img src="http://securegames1.weebly.com/uploads/5/5/1/0/5510021/off7.png" name=off7 border=0></a><..copyright muizyusuff.securegamesstudio.t83.net all rights reserved..!> TRY THIS CODE OUT AND TELL ME WHAT YOU THINK. IT WAS MADE BY ME AND ALSO SITE. DON'T MIND THE LINK. CHANGE IT IF YOU WANT. IT WOULDN'T WORK WITHOUT A LINK. SYYR. NEED HELP WITH THIS, TELL ME. P.S IF YOU DON'T HAVE A HTML EDITOR, YOU CAN USE ONE ONLINE AT http://www.onlinehtmleditor.net/. BYE. _________________________________________________________________ I am not an HTML expert. The design program I inherited has a CSS assigned to a "Learn More" button that reads as follows:
Code: #slideshow .learn_more { position: relative; background: url(/graphics/btn-learn_more.png) no-repeat; display: block; height: 27px; text-indent: -9999px; width: 123px; z-index: 2; }
#slideshow .learn_mo hover { background-position: 0 -27px; }
As far as I can tell, it seems what that is doing is showing the top 27 pixels of a built-in "Learn More" graphic, and when you hover over it, it shows the bottom 27 pixels and gives the illusion of a rollover. My question is, what direct HTML code could I assign to a graphic to duplicate that effect so I can customize my own buttons? For instance, let's say I want the below graphic (which is 242x54, named button.jpg) to link to google.com. What code would I use to create the hover effect I described above? Right, I've got some image rollover codes. Have a look at it by the link at the bottom. Every time I view my pictures there's always a white box with and X in. I know that means it hasn't loaded/downloaded. I would like a code so that I can make the pictures save in the visitors computer so it doesn't happen again. ToshNeox My website: http://www.tc-ua.piczo.com/ i am making a website for my webdesign/JAVA class. On my site i embedded a Left margin sliding menu from http://www.dynamicdrive.com/dynamici...lideinmenu.htm I want to make it so that when i rollover a link in the menu, the link changes from its english text to italian. I know for a fact that it is possible to alter the properties of the links inside the menu when i inserted into my <head>: Quote: <style fprolloverstyle>A:hover {color: #FFFF00} a {text-decoration:none} </style> Im new to webdesign, help would be greatly appreciated! I'm trying to make an image appear/change in response to a rollover, but the image is not in the same table as the rollover. I'm trying to redesign the header of my website, and have come up with this draft: bottleweb.org/test I want an image to appear in between the "BOTTLEWEB.ORG" text and the buttons. If for example I move my mouse over the 'forum' button, I want an image corresponding to 'forum' to appear in between the buttons and the "BOTTLEWEB.ORG" test. Is this possible? Hi guys. I'm working on a website for my shop, using html, php and mysql. At the moment I'm using frames but don't really like how it looks. have a look at www.jroche.com/shop I think it looks very cheap. Just wondering does anyone have any suggestions as to how i could improve it? I'd really appreciate any comments or code suggestions anyone could make. Ideally id like to have it all in one page, as opposed to using the frame layout im currently trying. I'm only working on it now so some links don't work. Thanks Hell everyone. This is my first post and im sure it will not be my last here on HTMLforums.com. I am looking to create a web page and host it using godaddy.com. I would like to have a forum on it but I am having complete creativity block here and i do not know what i want my website to be about. I love technology and i am currently a student at the University of Phoenix online and i am getting my associates degree in Information Systems. I also enjoy cars, sports, outdoors, travel and other things. I am 20 years old and am from New Jersey. The purpose of this site is to maintain an up to date example of my web design skills to show a potential employer. Please if you have any ideas let me know. I can be reached via e-mail at laxmetal23@verizon.net. I am also usually on AIM and my sn is UNC6183. Please let me know. Hello, I am not completely new to CSS or XHTML but I am having a problem that I have never come across before. Basically the problem is sizing with elements in the content field of my site. Here is an example: if I make an image like this Code: <img height='150' width='150' ..... > The height and width do not work properly in FF but if I change it to this: Code: <img style=" height:150px; width:150px;" ..... > Than it works. Why would it ever ignore the native height and width inside an image tag ( and other tags as well) What I am trying to do is create an environment that most anyone web developer can build quick content into my template. But if odd situations like this continue to happen it will not be user friendly at all. I assume there is some type of inheritance issue going on ( note I never use the inheritance property in my content div). Is there a way to create a div where its contents are unaffected by all the divs creating the template??? Thank you for the help Hi all -- Working with a tight deadline (2 weeks) and need to come up with a solution. My company has a library of promotional materials that it makes available internally. Currently, we have a little ASP ordering app that lets employees create a cart of items and order these materials. (There is no money changing hands, it's all free.) As it stands, the plug on this app will need to be pulled on December 31st, and I need to find a new solution. I am not well-versed enough in ASP to be able to develop a new app in the given time frame, and I need something relatively simple that can get the job done. Ideally, we could take this app and move it elsewhere, but that doesn't look like it's going to be possible. Any and all ideas would be MUCH appreciated!!! Hey, I recently logged onto my old Piczo site which I used to store pictures on( The site domain being; http://www.badboypicturessss.piczo.com/?cr=1 ) . After logging in I discoverd no images show. Just a red cross upon the corner (I've tried to view on Firefox and Internet Explorer) When clicking propeties on the picture and entering into the Firefox html I am met with, This XML file does not appear to have any style information associated with it. The document tree is shown below. − <Error> <Code>AccessDenied</Code> <Message>Access Denied</Message> <RequestId>4B0C38630330B989</RequestId> − <HostId> 0hsgiTfM+6zl+X127uhukEZM6SYj0D+HCeYk113cG8ftnK0AM5 knte5VpiqDEKo4 </HostId> </Error> Am running out of ideas of how to get the images to show, I've tried numerous forums seeking the answer to how to display the images! Thanks for reading, be great if you could help! Hi! I have a problem here which really really annoys me. http://members.dodo.com.au/~rouslan/...ite/index.html when you look at the page it looks great with Firefox and when you look at it with Internet Explore 7 it also looks fine except the main content is not absolutely centered. In Internet Explore 7 you can see that by comparing margins, the left one is shorter than the right one. How can I fix that? p.s. I am a lot out-of-dated with HTML, because the last time I was constructing web pages 8 years ago, so you might notice in source I use a lot of tables, etc. If you can suggest I should change all the code, please do or simply paste it here as solution. Thank you! My page scrolls and it shouldn't! Any ideas...? or can I not see the wood for the trees? Link My previous post meantioned that I have made an advert using HTML in a page using a table and I'm using an IFrame to embed this into my main pages where needed. I've hit a real problem this time. The table I've made seems to set its own minimum width for cells. As a result this causes the end cell to slightly spill off the edge of my pages. I have manually changed everything I can possibly think of, and nothing seems to work. In what instance would a table do this? The table is in a form. Inside the table in each cell I have 1 line of text, followed by a input box directly underneath, followed by another input box directly underneith, followed by a text hyperlink directly underneath that. I have the html in the text file attached if you want to have a little nosy (the javascript file referenced is to periodically change the text of the second box in each cell). Any ideas would be much appreciated. I've spent far too much time on this advert than I would have liked... Regards Hey. First of all my html etc skills aren't any good. I have a basic understanding how it works etc, but thats about it :s So, I know how to use Photoshop, and the basics of dreamweaver. And this is what i have made so far: http://wasnicht.urli.net/ I have 2 versions, that one, and one which isn't so wide. But otherwise it's the same, except that in the uploaded version there, i dont have an iframe inside the box. So my problem here is that whenever I type something in the middle, that exceeds its original size, it expands, thats meant to do so, but it also expands the navigation bar and the rest of the page, leaving it messy and pretty, well... I'd need some ideas how to fix this, e.g. if I made a index page, just like that, without the text box, and made an iframe, that expands downwards, inside it, put a separate .html (the box). I'm not gonna rip my ass off trying it, I'd really want some ideas how to construct it. Another problem I had with the box was that the right side image of the box (the dropshadow is 90 degrees), the shadow wouldnt go with a constant depth from the top to the bottom, so when the image repeated itself i had an ugly "error". What I did was to remove the shadow of the text box entirely. What are the common issues with websites not being properly displayed in Firefox? Reason is due to my website being displayed correctly in IE but when switching to Firefox the site suddenly breaks apart. Any ideas? Hi guys, I got a quick question. I can't for the life of me understand why the youtube, facebook and twitter images below absolutely insist on having a few pixels of space to the bottom of it's line. It makes it so the following link-text seem to be too low on the line in comparison to the image. If you see in the lower left corner of www.leveldance.com you can see what i mean. Any ideas? (I have no padding added in the css) Thanks a million in advance! HTML Code: <div class="left_col_container">
<div><img src="images/navigation/sociables_headline.png" alt="Join Our Community!"/></div>
<p style="margin-top: 5px; margin-bottom: 0px">Join the newsletter!</p>
<style type="text/css">.af-form {margin:0 !important;}</style>
<script type="text/javascript" src="http://forms.aweber.com/form/36/693624936.js"></script>
<div style="margin-top: 5px">
<a class="sociables" href="http://www.facebook.com/leveldance" target="_blank"><img src="images/sociables/faceBook-icon.png" class="no_border" alt="Find us on Facebook!"/></a><a class="sidebutton" href="http://www.facebook.com/leveldance" target="_blank"> Find us on Facebook!</a>
</div>
<div style="margin-top: 5px">
<a class="sociables" href="http://www.twitter.com/leveldance" target="_blank"><img src="images/sociables/twitter-icon.png" class="no_border" alt="Follow us on Twitter!"/></a><a class="sidebutton" href="http://www.twitter.com/leveldance" target="_blank"> Follow us on Twitter!</a>
</div>
<div style="margin-top: 5px">
<a class="sociables" href="http://www.youtube.com/user/leveldancenyc" target="_blank"><img src="images/sociables/youtube-icon.png" class="no_border" alt="See us on YouTube!"/></a><a class="sidebutton" href="http://www.twitter.com/leveldance" target="_blank"> See us on YouTube!</a>
</div><br/>
</div> <!-- left_col_container end -->
Hi All, This doesn't completely relate to HTML, I am more asking questions about Javascript but are related to HTML and CSS. Anyways here are my questions: 1 - Can you create a javascript file (.js) with out using HTML? If so how would you view this file? 2 - Can you link a CSS file to a Javascript file? 3 - Is there a certain program which is dedicated to view/making Javascript files? 4 - Is it legal to call a program that I make JavaScript Beam? and have copyrights to the name JavaScript Beam? If that is illegal then would it be legal (inclduing copyrights) to call the program I make JS Beam? Thanks Why can't this HTML Code: HTML Code: <table class='tableborder' cellpadding='6' cellspacing='1' border='0' width='100%'><tr><td class='maintitle' colspan='3' style='text-align:center'><a href='/index.php?showtopic='+ topicid +'' title='View the thread'>'+ maintitle +'</a></td></tr><tr><td align='center' class='row2' border='0'>Winner's Avatar</td><td align='center' class='row2' border='0'>Winner's Entry</td><td align='center' class='row2' border='0'>Winner's Prize</td></tr><tr><td align='center' class='row4' border='0'><a href='/index.php?showuser='+ userid +''><img src=''+ avatar +'' border='0' alt=''+ username +''s Avatar' /></a></td><td align='center' class='row3' border='0'><img src=''+ signature +'' alt=''+ username +''s Entry' /></td><td align='center' valign='middle' class='row4' border='0'><fieldset class='fieldset'><legend>Prize</legend><div><b>Name:</b> <a href='/index.php?showuser='+ userid +''>'+ username +'</a></div><div><b>Prize:</b> '+ prize +'</div><div><b>Admin Rating:</b> <img src=''+ ratimg +'' alt=''+ opinion +'' /></div><div><a href='/index.php?showtopic='+ topicid +''>Click here to visit the thread.</a></div></fieldset></td></tr></table> Go into JavaScript like this: HTML Code: <script>
var topicid = ''; /* Something in here. */
var maintitle = ''; /* Something in here. */
var userid = ''; /* Something in here. */
var avatar = ''; /* Something in here. */
var username = ''; /* Something in here. */
var signature = ''; /* Something in here. */
var prize = ''; /* Something in here. */
var ratimg = ''; /* Something in here. */
var opinion = ''; /* Something in here. */
document.write('<table class='tableborder' cellpadding='6' cellspacing='1' border='0' width='100%'><tr><td class='maintitle' colspan='3' style='text-align:center'><a href='/index.php?showtopic='+ topicid +'' title='View the thread'>'+ maintitle +'</a></td></tr><tr><td align='center' class='row2' border='0'>Winner's Avatar</td><td align='center' class='row2' border='0'>Winner's Entry</td><td align='center' class='row2' border='0'>Winner's Prize</td></tr><tr><td align='center' class='row4' border='0'><a href='/index.php?showuser='+ userid +''><img src=''+ avatar +'' border='0' alt=''+ username +''s Avatar' /></a></td><td align='center' class='row3' border='0'><img src=''+ signature +'' alt=''+ username +''s Entry' /></td><td align='center' valign='middle' class='row4' border='0'><fieldset class='fieldset'><legend>Prize</legend><div><b>Name:</b> <a href='/index.php?showuser='+ userid +''>'+ username +'</a></div><div><b>Prize:</b> '+ prize +'</div><div><b>Admin Rating:</b> <img src=''+ ratimg +'' alt=''+ opinion +'' /></div><div><a href='/index.php?showtopic='+ topicid +''>Click here to visit the thread.</a></div></fieldset></td></tr></table>')
</script>
|
|||||||