Jump to content

mrdennis

Members
  • Content Count

    16
  • Joined

  • Last visited

Community Reputation

0 Neutral

About mrdennis

  • Rank
    Newbie
  1. I think what I am doing is a bit more complicated(sloppy?) I have a lot of divs floating around, I may need to cut some down. Here's a picture of what's going on with an explination.http://i535.photobucket.com/albums/ee358/mr0975/webpage.pngRight now when you hover over any one of those 5 words around the casting (crankshaft) it displays a different image overtop of the casting.So I have a div for the words, like Fluid Flow, and for the main image, and the image associated with Fluid flow.I hope that helps explain what I am doing. The way I have it now works... it's just really clunky, and I want to add a timeout effect which would just about quadruple the current size of my .js file if I did it my way.
  2. Hrmmm, i tried this with css and it went berserk. heres the html which will probably give some insight <div id="title" style="top: 270px; left: 50px; font-size: 200%;" onmouseover="mopencapfd()" onmouseout="mclosecapfd()" onmouseout="mclosetime()"> <a href="./software/fluid.html" style="color: #666; text-decoration: none;">Fluid Flow</a></div><div id="title" style="top: 630px; left: 210px; font-size: 200%;" onmouseover="mopenkent()" onmouseout="mclosekent()" onmouseout="mclosetime()"> <a href="./software/kent.html" style="color: #666; text-decoration: none;">Automatic<br/>Meshing</a></div><div id="title" style="top: 330px; left: 330px; font-size: 200%;" onmouseover="mopencap()" onmouseout="mclosecap()" onmouseout="mclosetime()"> <a href="./software/cap.html" style="color: #666; text-decoration: none;">Thermal and<br/>Solidification</a></div><div id="title" style="top: 610px; left: 600px; font-size: 200%;" onmouseover="mopencapstress()" onmouseout="mclosecapstress()" onmouseout="mclosetime()"> <a href="./software/stress.html" style="color: #666; text-decoration: none;">Mechanical Properties</a></div><div id="title" style="top: 270px; left: 660px; font-size: 200%;" onmouseover="mopenporo()" onmouseout="mcloseporo()" onmouseout="mclosetime()"> <a href="./software/poro.html" style="color: #666; text-decoration: none;">Porosity Prediction</a></div> <div id="capfd"><img src="./software/capfd.png"></div><div id="kent"><img src="./software/kent.png"></div><div id="cap"><img src="./software/cap.png"></div><div id="capstress"><img src="./software/mech.png"></div><div id="poro"><img src="./software/poro.png"></div> The CSS gives some position to the pictures, but that's about all i'm using it for. Yeah grammar.
  3. I have a rather cumbersome code to achieve a mouseover effect. Is there some way to have Onmouseclick feed the div id into my .js file and ultimately into a function?That way I could do the following in two functions. function mopencapfd(id) { document.getElementById("capfd").style.display = "block"; } function mopenkent(id) {document.getElementById("kent").style.display = "block"; } function mopencap(id) {document.getElementById("cap").style.display = "block"; } function mopencapstress(id) {document.getElementById("capstress").style.display = "block"; } function mopenporo(id) {document.getElementById("poro").style.display = "block"; } function mclosecapfd(id) {document.getElementById("capfd").style.display = "none"; } function mclosekent(id) {document.getElementById("kent").style.display = "none"; } function mclosecap(id) {document.getElementById("cap").style.display = "none"; } function mclosecapstress(id) {document.getElementById("capstress").style.display = "none"; } function mcloseporo(id) {document.getElementById("poro").style.display = "none"; }
  4. Okay, truth time, I'm not very good with all this javascript stuff. As a matter of fact, I leave trails of breadcrumbs behind me every time I attempt to create a javascript anything.I want to make a block, a wonderful-not-quite-square block. In this block is going to be a long series of news bulletins; however! you can only see the first two(ish) before the overflow:hidden cuts the whole list off. "ooooh, this sucks", you say, " I really want to read the rest of them Matt". Okay sure, just hover over the box, "OH JESUS A COOL LOOKING GRAPHIC INDICATING THE ABILITY TO EXPAND THIS WINDOW JUST POPPED UP!!". As it should, then you summon the courage to click on the graphic and BAM! the box expands to a much greater height, and it switches to overflow:auto.Now we can read everything in the box.Or at least that was the dream I had last night, that's not the only dream mind you. I don't want to give the impression that I am obsessed per-se over this concept. There was also a dream where and old female friend of mine and myself were on some type of vacation(dinner?) at the lighthouse of alexandria(or at least what I imagine it looked like at the bottom, hasn't actually been there for quite a while, I hear). And then you know, other stuff.In case you didn't gather the point of my seemingly crazed ramblings, I need help making this a reality-- and I am talking about the text box here, not the other one, that's my job, weirdo.
  5. Oh quick question-- does java have any function that fades out instead of aprubtly turning display off? and if it does, it is wise to use it?
  6. Awesome! totally works. I got my pictures flashing in when I mousever the respective words.Here's the exact codeHTML:</header><div id="title" style="top: 100px; left: 80px; font-size: 200%;" onmouseover="mopencapfd()" onmouseout="mclosecapfd()"> CapFD</div><div id="title" style="top: 460px; left: 240px; font-size: 200%;" onmouseover="mopenkent()" onmouseout="mclosekent()"> KENT</div><div id="title" style="top: 200px; left: 480px; font-size: 200%;" onmouseover="mopencap()" onmouseout="mclosecap()"> CAP</div><div id="title" style="top: 130px; left: 700px; font-size: 200%;" onmouseover="mopencapstress()" onmouseout="mclosecapstress()"> CAPstress</div><div id="title" style="top: 420px; left: 820px; font-size: 200%;" onmouseover="mopenporo()" onmouseout="mcloseporo()"> PORO</div><div id="capfd"><img src="./capfd.png"></div><div id="kent"><img src="./kent.png"></div><div id="cap"><img src="./cap.png"></div><!--<div class="capstress"><img src="./capstress.png"></div>--><div id="poro"><img src="./poro.png"></div><div style="position: absolute; top: 200px;"><img src="./clear.png"></div></html>CSS:#title { position: absolute; font-family: "Lucida Grande"; font-size: 10px; font-weight: lighter; font-variant: normal; color: #666; margin-top: 10px; letter-spacing: 0.3em; z-index: 3; }#capfd { position: absolute; top: 200px; z-index: 2; display: none; }#kent { position: absolute; top: 200px; left: 244px; z-index: 2; display: none; } #cap { position: absolute; top: 200px; left: 423px; z-index: 2; display: none; } #capstress { position: absolute; top: 200px; left: 620px; z-index: 2; display: none; } #poro { position: absolute; top: 200px; left: 868px; z-index: 2; display: none; } java script:function mopencapfd(id) {document.getElementById("capfd").style.display = "block"; } function mopenkent(id) {document.getElementById("kent").style.display = "block"; } function mopencap(id) {document.getElementById("cap").style.display = "block"; } function mopencapstress(id) {document.getElementById("capstress").style.display = "block"; } function mopenporo(id) {document.getElementById("poro").style.display = "block"; } function mclosecapfd(id) {document.getElementById("capfd").style.display = "none"; } function mclosekent(id) {document.getElementById("kent").style.display = "none"; } function mclosecap(id) {document.getElementById("cap").style.display = "none"; } function mclosecapstress(id) {document.getElementById("capstress").style.display = "none"; } function mcloseporo(id) {document.getElementById("poro").style.display = "none"; }I'm not sure if that's the most effecient way, I imagine there is some better function that will indiscriminately set display to none.Next I'm going to add some timing effects to it.
  7. HTML:<html><header><title>dropbox</title><script language="JavaScript" src="drop.js"></script><link rel="stylesheet" href="./drop.css"></header><div id="title" style="top: 100px; left: 80px; font-size: 200%;" onmouseover="mopencapfd()"> CapFD</div><div id="title" style="top: 460px; left: 240px; font-size: 200%;" onmouseover="mopenkent()"> KENT</div><div id="title" style="top: 200px; left: 480px; font-size: 200%;" onmouseover="mopencap()"> CAP</div><div id="title" style="top: 130px; left: 700px; font-size: 200%;" onmouseover="mopencapstress()"> CAPstress</div><div id="title" style="top: 420px; left: 820px; font-size: 200%;" onmouseover="mopenporo()"> PORO</div><div class="capfd"><img src="./capfd.png"></div><div class="kent"><img src="./kent.png"></div><div class="cap"><img src="./cap.png"></div><!--<div class="capstress"><img src="./capstress.png"></div>--><div class="poro"><img src="./poro.png"></div><div style="position: absolute; top: 200px;"><img src="./clear.png"></div></html>CSS:#title { position: absolute; font-family: "Lucida Grande", Tahoma; font-size: 10px; font-weight: lighter; font-variant: normal; color: #666666; margin-top: 10px; letter-spacing: 0.3em; z-index: 3; }.capfd { position: absolute; top: 200px; z-index: 2; }.kent { position: absolute; top: 200px; left: 235px; z-index: 2; } .cap { position: absolute; top: 200px; left: 415px; z-index: 2; } .capstress { position: absolute; top: 200px; left: 610px; z-index: 2; } .poro { position: absolute; top: 200px; left: 860px; z-index: 2; } I have no javascript, I'm pretty sure I want to use seperate mopen functions though... a guess.
  8. I'm trying to make a menu that uses mouseover a text to display one image over another.I am very new to javascript and totally lost.Imagine there is a single word, like "word" on the webpage, and there is picture # 1 also on the webpage, when I mouseover "word" i want picture # 2 to be displayed overtop of picture # 1. Can someone help me with the javascript for this?
  9. mrdennis

    :hover for images

    Okay, I have a really cool idea that will showcase the different types of results this software package can create.To do this I want to have a base image of a casting, and then display different results over certain sections of this casting.I created this code which seems so dangerously close to being correct. It just looks crazy when the backgrounds are fighting each other. I am worried that the way I am going about this is all wrong.The CSS:.dropdown { position: absolute; width: 1000px; height: 200px; top: 200px; background: #eee; z-index: 1; }.dropdown ul{ margin: 0; list-style: none; padding: 0; z-index: 2; } .dropdown li{ display: inline; position: absolute; overflow: show; margin: 0 2px 0 0; padding: 0; top: -100px; width: 200px; z-index: 2; } .dropdown li:hover{ position: absolute; top: 0px; height: 200px; padding: 0; background: #d10000; color: #d10000; z-index: 2; }The HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>drop down</title><link href="drop.css" rel="stylesheet" type="text/css"/> <body><div class="dropdown"><ul><li>Fluid Flow</li><li style="left: 200px;">Porosity</li><li style="left: 400px;">Strength</li><li style="left: 600px;">Thermal/Solidification</li><li style="left: 800px;">Automatic Meshing</li></ul></div></body></html>The blocks of color will eventually(i hope) images of a casting. When you hover over a particular word, which will also be a link, it will display a different image where it is now red. I don't know if looks crazy to other people, but when i look at it in firefox 2-- it flashes red and grey very quickly, and the words my mouse hovers over do too.
  10. mrdennis

    Drop down text

    A huge thank you to everyone who posted and helped me out here. I really appreciate the positive help.
  11. mrdennis

    Drop down text

    ###### yeah! how can people still say technology has not imporved our lives...
  12. mrdennis

    Drop down text

    Yesssss, totally worked. I'm on firefox 2 actually. Your suggestion still did the trick though. That may explain many of my problems...I would also like to add that sonic the hedgehog was(is?) a sweet game. Although, still hard to say if he could beat mario in a fight.
  13. mrdennis

    Drop down text

    Hrm, it doesn't seem to be working for me. this is the exact .html and .css i am using.CSS:.box { height: 200px; width: 250px; overflow: hidden; background: #eee; overflow: hidden; } .box:hover{ height: auto; background: #eee; }HTML:<html><link href="expand.css" rel="stylesheet" type="text/css"/> <div class="box">adjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld g</div></html>Did I put something in wrong?
  14. mrdennis

    Drop down text

    Hrm, this is similar to something I tried before. I believe, not sure if it's true, that since the overflow is hidden, in the .box part, the hover is a component of that and the hover's "height: auto" is simply stuck inside the "overflow:hide" from the first part.I remember seeing confusing stuff about block level elements and such. I think if there were some way to keep the .box:hover from being stuck inside the overflow:hide from the .box part, that it could work.
  15. mrdennis

    Drop down text

    Awesome, thanks for the tips-- I'm gonna try those out right away.While you guys were investing I was busy getting myself into more trouble...(FYI I hadn't touched any HTML, CSS, or any web related stuff before last monday, and now I have the sole respsoblility of redoing the company website... word)I'm also trying to make a cool effect where you highlight different aspects of our software analsyis, and it displays different pictures of those results. Basically I am butchering up some .pngs and trying to get them to :hover over a base image.The CSS:.dropdown { position: absolute; width: 1000px; height: 200px; top: 200px; background: #eee; }.dropdown ul{ margin: 0; list-style: none; padding: 0; } .dropdown li{ display: inline; position: absolute; overflow: show; margin: 0 2px 0 0; padding: 0; top: -100px; width: 200px; } .dropdown li:hover{ position: absolute; top: 0px; height: 200px; padding: 0; background: #d10000; color: #d10000; }The HTML:<html><link href="drop.css" rel="stylesheet" type="text/css"/> <body><div class="dropdown"><ul><li>Fluid Flow</li><li style="left: 200px;">Porosity</li><li style="left: 400px;">Strength</li><li style="left: 600px;">Thermal/Solidification</li><li style="left: 800px;">Automatic Meshing</li></ul></div></body></html>It basically works, the colors change like I want to and they are all in the right place. Thing is, if anyone were to view this in a dimly lit room they would immeaditly plunge into a grand mal seizure. I left overflow: show so that I could pop the words up above the images, something tells me this is the root of the problem. Is there a way to get the images to stop fighting with each other?
×
×
  • Create New...