Discussion Board


Since this should be a place where stuff can be discussed...

please post your questions to the discussion tab at the top!

If you do, you can say goodbye to this mess down below!

  • Here, you can place questions that you're specifically having problems with

  • If you feel you're not the only one having this problem... place your inquiry in the FAQ


































Read this: It seems like this page is basically a duplication of the FAQ. So there may be a job for someone in merging the two. It becomes confusing with two q+a spaces. Also there is a discussion tab at the top of each page. Perhaps the FAQs can be parsed and organized into various themes if there too much for one page?? - dgelb dgelb

Leave any questions about Interactivity Projects here.
Before you do though, check the FAQ. There's a good chance you're not the only frustrated one.
To leave your nickname, type 3 ~ things together.




Help!

My web page doesn’t work. On the page so far I have just images and the code is very simple... The css is also simple, it seems like everything is fine however my images are shown as broken in explorer, and since they are gifs other browsers like Firefox dose not show them at all. The problem is that when I worked on mac everything worked fine, but now that I moved to PC nothing is shown even in Explorer. I was wondering what I have done wrong... if someone could help me as soon as possible I would be thankful… My html:<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My WebPage</title>
<link href="mywebpage.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="large_circle">
<img src="large_circle.gif">
</div>
<div class="middle_circle">
<img src="middle_circle.gif">
</div>
<div class="small_circle">
<img src="small_circle.gif">
</div>
<div class="lines">
<img src="lines.gif">
</div>

<div class="br1">
<img src="br1.gif">
</div>

<div class="bb1">
<img src="bb1.gif">
</div>
</body>
</html>

css:.holdingBox {
position:absolute;
margin: 100px;
}

#large_circle {
position:absolute;
margin: 100px;
left: 310px;
top: 160px;
padding: 0px;
height: 0px;
width: 0px;
}
.middle_circle {
position:absolute;
margin: 30px;
left: 683px;
top: 122px;
padding: 0px;
height: 0px;
width: 0px;
}
.small_circle {
position:absolute;
margin: 10px;
left: 835px;
top: 58px;
padding: 0px;
height: 0px;
width: 0px;
}
.lines {
position:absolute;
margin: 10px;
left: 300px;
top: 40px;
padding: 0px;
height: 0px;
width: 0px;

}
.bb1 {
position:absolute;
margin: 10px;
left: 925px;
top: 250px;
padding: 0px;
height: 0px;
width: 0px;

}
.br1 {
position:absolute;
margin: 10px;
left: 956px;
top: 345px;
padding: 0px;
height: 0px;
width: 0px;

}
Jane Tsybine



REPLY:


the width attribute in css needs to be EXACTLY the width of your image. AND both images need to be the same width!
oorrr... try this: in your css:
background: url(whatever.jpg) no-repeat;
the no-repeat will stop it from tiling so make it a bit bigger.
hope that works.

as for having only the one button instead of both links, give your button an id. say #button
then apply the css to #button instead of 'a'.

everything works?



OKAY: HERES WHAT I GOT WHEN I FOLLOWED YOUR INSTRUCTIONS
So I did what you said, and it does this weird double thing. It attaches onto my other style ,text, (.op) which is separate from the button style(.utopia...don't ask about the names)
hover_man.png

2. is there anyway of getting a smother look? if i change the width too low the button looks like this when I hover,
Hover_man_3.png
and when its too high the button looks like this. Is there anything I can do about that?
hover_man_1.png
And here is my code
Picture_2_2.png


ANSWER:
Hey Joel. The problem is how you are setting up the link.
you need to make a link and leave it empty:
<a href="wherever.html"></a>

there. now all the magic is in css:
a {
display: block; /*this is complex to explain. just add it. basically makes the link into a box that we can resize. */
width: 124px; /* width of the image */
height: 41px; /* height */
background: url(image/button_unpressed.jpg); /* that sets the background! */
}

/* now for the hover: */

a:hover {
background: url(image/button_pressed_or_whatever.jpg);
}

tell me if that works :)






QUESTION:
I'm trying to make a hover link. I want my image to look different when you put your mouse over it. How do I do it? I've tried a few things Ive found on the internets, but none of them worked. :(
hover_1.png

I want to be able to make that one green button look like this file
hover_3.png
Here is my HTML: For the Real Text click here!
hover_2.png






QUESTION
Hey, I'm trying to make a page link to another using an image but I don't know how to place the link where i would like it to be... its just chillin the top left corner. I'm not sure how to edit where it goes on css, help? Oh and i would like the image to change to a different image when the mouse is hovering over the link as well..thanks!
-ejoan

Thank you for that addition to the examples page! That was exactly what i was looking for!
-ejoan

ANSWER
To make the image link and change on hover, instructions have just been posted on the Code Examples (HTML) page.

But if you just want to link an image, with no hover, here's much simpler way of doing it:
Position your image on the page like normal in CSS with the left and top properties, then put the link around the image in the HTML file. For example, the code in your HTML document for the positioned image should look like this:
<div id="box1">
<img src="images/image1.jpg">
</div>
 
So to link the image, the starting "a" tag (<a href="addresshere">), goes before what you want to link, and the ending "a" tag (</a>) goes right after.
<div id="box1">
<a href="addresshere"><img src="images/image1.jpg"></a>
</div>
 


heyy i was wonder how come my html preview is showing " Â Â Â Â " on the top of my page. does anyone know why?

might be how you are saving the file. are you using text wrangler?

- yea i am... its so weird :/
#box1{
    left: 50px;
    top: 50px;
    position: absolute;
    }
#box2{
    left: 250px;
    top: 50px;
    position: absolute;
    }
#box3{
    left: 450px;
    top: 50px;
    position: absolute;
    }
#box4{
    left: 50px;
    top: 250px;
    position: absolute;
    }
#box5{
    left: 250px;
    top: 250px;
    position: absolute;
    }
#box6{
    left: 450px;
    top: 250px;
    position: absolute;
    }
#box7{
    left: 50px;
    top: 450px;
    position: absolute;
    }
#box8{
    left: 250px;
    top: 450px;
    position: absolute;
    }
#box9{
    left: 450px;
    top: 450px;
    position: absolute;
    }

<html>
 
<head>
<link rel="stylesheet" href="amystyles.css" type="text/css" />
</head>
 
<body>
 
<div id="box1">
<img src="blue.gif">
</div>
 
<div id="box2">
<img src="brown.gif">
</div>
 
<div id="box3">
<img src="darkblue.gif">
</div>
 
<div id="box4">
<img src="green.gif">
</div>
 
<div id="box5">
<img src="magenta.gif">
</div>
 
<div id="box6">
<img src="mango.gif">
</div>
 
<div id="box7">
<img src="orange.gif">
</div>
 
<div id="box8">
<img src="yellow.gif">
</div>
 
<div id="box9">
<img src="yellowgreen.gif">
</div>
 
</body>
 
</html>



hey guys! im having a problem with my squares. For some reason they arent positioning properly even tho my coordinates in CSS are correct. Is there any reason for this that i dont know?

  • Post your html code and we can take a look.



<html>
 
<head>
<link rel="stylesheet"href="key1.css" type="test/css"/>
 
<head>
 
<body>
 
<div id="box1">
<img src="squares/purply.gif">
</div>
 
<div id="box2">
<img src="squares/blue.gif">
</div>
 
<div id="box3">
<img src="squares/orange.gif">
</div>
 
<div id="box4">
<img src="squares/red.gif">
</div>
 
<div id="box5">
<img src="squares/green.gif">
 
<div id="box6">
<img src="squares/black.gif">
</div>
 
</body>
 
</html>
box5 div is not closed. </div>

Thank you! i closed it. But the thing is...the black square still is in the wrong spot :S

That might be because you didnt clear cache... command + R should refresh page with clean cache... appart from that everyting looks fine from what i can see. if you upload the files to digital locker, i can take a closer look...

Picture_2.png




roxx -
Hey! I am currently working on project1, exercise3. I was curious to know if there was some code-based method (as in, without using images) of making "frames" or knock-outs of objects so that you can see the background through them.
Thanks!

Answer:
You need a css file. im not sure if you know about this.. you need to write values for each of the square id's =
#box1 {
position: absolute;
left: 0;
top: 0;
}
#box2 {
position: absolute;
left: 200px;
top: 0;
}
....
REMEMBER: ids CANNOT contain spaces!!!

=
=
=

=

(thanks for answering my question. I got it to work now!) Lol, now another question!I have inserted my code for the colored squares and it works just fine, but how can I get the images to be 3 by 3, instead of in a column like it is in the picture? What code do I need to insert to apply a grid?-dewitback

Yup im having the same problem how do we fix it...-key1314

Ok i found the answer to the problem....well kind of. Basically as i was having the same problem instead of using firefox to open the file i used safari. In safari the squares displayed as a grid.


The code in the screenshot has ids like this: id="box 1" there cannot be spaces in the name. ie. id="box1" That may be why it isnt working in firefox.



Hey guys! I had o leave class a little early last week while learning about html! and I've run into a problem while trying to work on the exercise.
When I try to run the program I get an error message that says this:
Picture_3.png
Picture_desktop.pngdoes anyone know what this means? like what is 'shebang'? It reminds me of american idol "she bangs! she bangs!"

(to take a pic of your desktop press "command+shift+3") -dewitback



Joel, You are running the program as a python script. (squares.py) it should be squares.html, save it, and open it in firefox or safari as an HTML page. that should do it.




Hey! I'm currently working on a particular sketch that would benefit from using a sines or cosines function in the loop... However, I'm drawing a blank when it comes to my old Trig class material! I've tried to look online and had some trouble finding something simple and concise to explain the basic variables at play in an equation that is phrased as such: x+sin(a)*b. I completely forget how to manipulate the variables to get the desired slopes and sizes. Dose anyone know where I can go to get a visual on this?
Thanks!
roxxy

Never mind! I ended up finding what I was looking for! If there is anyone else interested in a graphing and math refresher, I've found this site to be a nice and simple visual example of the function of each variable in the equation:
http://jwilson.coe.uga.edu/emt668/EMT668.Folders.F97/Feller/sine/assmt1.html
Also, if you are using a mac, there is a built-in program called "Grapher" (look it up using spotlight) that is very handy for visualizing what your linear equations should produce. You type in your equation, and it will draw it out for you. I've found this to be extremely handy - now I can tell if it's my coding that I've messed up or the equation itself!
Cheers!
roxxy




Hey, does anyone know how to connect to digital locker with a PC?
  • If you're having trouble connecting via browser, I suggest downloading an FTP Client (FileZilla works fine) and connecting through there.
    Host: digital-locker.design.yorku.ca
    Username: your username (the same one as your York lab username)
    Password: your password (usually your student # unless you changed it)
    Port: (leave it blank)

    Hope this helps.

Yes, this helped, thanks a lot. Now i don't need to bother commuting to york just to do this. =D


Hey guys,
I'm having some problems finding a working link for my part 3 of project 1. I've quadruple checked to make sure I didn't make any typos anywhere. Does anybody have a working link as an example for me to use? I'm not even sure if the url should start with http: or afp:. Thanks guys.

This should do it. problem was you used a dot. not allowed.

http://digital-locker.design.yorku.ca/1006mw09/lab2/khou/khou-movingcircle/



OMG... someone just changed my project one and put someone else's work.... this happened twice! Does anyone have an idea of what happened? :O
-amy yang
  • Your project1 page is called " project1. you need to call it somehting unique. Im about to fix it... give me a sec.


LOL... it just changed again into someone's work now... i hate this so much,
-amy yang


Thank you so much!! Who ever you are :P
-amy yang



I was just wondering if anyone found the website with the grid plotting to help out with the project. thanks
- Claudia
  • Answered in the FAQs section.



For some reason when i try to save my sketch in processing by using the save("filename.png"); it doesn't show up in the folder it is supposed to save to..
- erika

  • Double check where you 'sketch' folder is located. If you change computers etc. it automatically goes to documents. Try resaving it and purposefully designating the folder you specifically want it in. Then run it with the save(); function and it should go into the folder of the document you're working on.

I created a new folder for the sketch to save in and re-did the preferences but it still won't save i nthe folder i redirected it to... :(
-erika

  • are you using windows or mac?

i am using windows, didn't think that would make a difference in saving things tho since i downloaded the program for windows
-erika

  • Ok, how about posting your code here?Usually, as soon as you save your processing file, (no matter where it is) it will make a folder with the name and put your processing file in it. Then any image that is saved from the program will also go to that folder. possibly its a code issue? Do you have any other computers at home to try it on?

I have saved it just by doing save as from the drop menu and it has worked so i have it saved it's just weird that the function isn't working but i'm not going to worry about it now i suppose, thank you for your help!
-erika




I've been doing some sifting around on the processing.org website, and there's some info on the saveFrame() function. It mentions that if I use a function like saveFrame("image-####.jpg"), it should save a sequence of images into the sketch folder … when I try it, it saves the first file as image-0000.jpg, and then just keeps overwriting it.
- jswin jswin Mar 11, 2009

  • Answered. Check FAQ, Jeremy.



When inserting a code onto your project to accompany the sketch what type of code do you make it rather than plain text, cause i don't see one called processing.
-erika


QUESTION
Hi, I am trying to overlap my image with my text but nothing happens, the text simply stays on top pf the image am I doing something wrong with the code?
<html>
<head>
<title>blackfoot river</title>
</head>
<body>

<div id="text2">
BLACKfoot RIVER
</div>

<div id="box1">
<img src="lodki.jpg">
</div>

</body>
</html>

CSS:
text2{
position: absolute;
left: 100px;
top: 500px;
color: #000000;
}

#box1{
left: 150px;
top: 150px;
position: absolute;
}

ANSWER
Your "text2" id does not have a # in front of it in the CSS, this might be the issue.
It should look like this:

#text2{
position: absolute;
left: 100px;
top: 500px;
color: #000000;
}

QUESTION- - -
Hi, I was looking at some websites for ideas on Project 3 and some of the websites have sound incorporated into them. I was just wondering if anyone knows how we can do that using HTML, or if its even an option.

thnx :)
- - - DaniB

ANSWER:
you can definitely embed sound into website with html. google 'sound embedding html'
or try this website for some basic info: http://www.w3schools.com/media/media_browsersounds.asp


Check FAQ for questions and answers