PDA

Click to See Complete Forum and Search --> : Add photos web page at an angle

msc_168
03-14-2007, 06:42 PM
How can I add photos to my web page so that they are angled? If you need an example go to http://www.silvia.trkman.net/ and select the pictures button to see what I want to do.

Thanks for any help--- Caralee
PineSolPirate
03-14-2007, 06:49 PM
Open the image in an editor (like the gimp) and do a rotation on them, then save them and load them on your site.
Poxicator
03-15-2007, 05:30 AM
PineSolPirate's suggestion is spot on but alternatively you could try this:
http://www.swfir.com/

PS: You really need to make more of your text in your buttons, that's a classic example of design over content. The ultimate objective of a button, and indeed any text, is for it to be legible. Give the text more prominence by emboldening it, giving it a strong colour, or preferably change the font. Squint your eyes and see how legible it is, I'd suggest giving the text the same treatment as you've given to "News".
msc_168
03-15-2007, 04:50 PM
Thanks Pete --- I think that is what I was looking for, but from the site I can't figure out the code would be written to apply it to angle a photo. I am really new to this stuff could you possibly give an example of what I should write? I am using Dreamweaver 8, so would that change the code would need to be applied?

Thanks so much -- Caralee
Poxicator
03-15-2007, 05:41 PM
d/l the app from their site.

Open your html file in DW and switch to code view.

Where your head tag is input this:
<script type="text/javascript" src="swfir.js"></script>

At the end of your html page type this prior to closing your body tag.

<script type="text/javascript" src="swfir.js"></script>
<script type="text/javascript">

window.onload = function(){
rotate = new swfir();
rotate.specify('src', '/swfir.swf');
rotate.specify('rotate', '-5');
rotate.swap("img");
}

</script>

upload your html file and the files you download.

If this still doesnt make sense go to this page and view source:
http://www.swfir.com/examples/rotate/
look for the <head> tag and note where the <script> tag is, that's where your <script> should be as shown above.
Plus where the rotate script is.
msc_168
03-15-2007, 11:12 PM
I tried it every which way and can't make it work. I can't understand how the rotating code finds the picture...

Here is the code from a new index.html file in DW, and I pasted the picture code at the bottom. If you don't mind can you write it the way it should look for me? Thanks again.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>


****<img src="dsc00985.jpg" alt="example" />********
Poxicator
03-16-2007, 05:54 AM
In your simplified version it should look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="swfir.js"></script>
</head>

<body>
<script type="text/javascript" src="swfir.js"></script>
<script type="text/javascript">

window.onload = function(){
rotate = new swfir();
rotate.specify('src', '/swfir.swf');
rotate.specify('rotate', '-5');
rotate.swap("img");
}
</body>
</html>

Remember, you must upload this file and the files you d/l to your host for this to work.
msc_168
03-16-2007, 10:46 AM
That didn't work either, and I have all the files uploaded to my DW panel and can view via a web broser. I think the picture code needs to be written different? Here is something from the Swfir site:

Before swfIR is included in the page:
<img src="pic.jpg" alt="A picture" id="pic" />
After swfIR is included in the page (rendered source):
<span class="swfir" id="pic">
[replaced image; code varies ]
</span>

So, does this mean that I need to change the photo code?
Thanks for helping me out. I am using DW to build my website and am trying to go beyond my beginner knowlegde level. Caralee
Poxicator
03-16-2007, 11:06 AM
yes, you have to change "pic.jpg" to the name of your image(s)
msc_168
03-16-2007, 11:36 AM
What is the name of the image, is it alt="A picture"? That is the name I gave it when I loaded it. I see where I need to add the code is between the brackets, but I don't know what. Any other suggestions? Thanks again for taking the time to help me out.
Poxicator
03-16-2007, 01:57 PM
LOL
image name: naslovna.jpg
alt name: dog