Hello and thaks for taking the time to read this thread. On Friday I started building my very first website, it will be a website for showcasing my architectural portfolio for potential future employers. I've never used HTML in a more complex way than the formatting that goes into my posts on forums such as these, so my first port of call were some tutorials online. I feel I've made a good start, designing how I want the final homepage to look in photoshop first, then I set about re-creating this in dreamweaver. Firstly I'll show you the progress I've made. This was my concept for the homepage: The three back squares in the middle will be replaced with images(and links) for Portfolio, About me and Contact, while the orange box will change it's content depending on wheather the mouse is hovered over one of the three images. A brief description of the purpose of the website will be visable when the mouse isn't hovered over any of the three images. Right, this is how my website currently looks in 'Live View' within Dreamweaver: Certainly getting there as you can see. The site-navigation links in the top right are all set-up, an clicking 'dylanpugh | architecture' links to the homepage aswell. However I am having problems with the central portion. I've been trying to follow a guide like this to use CSS to get the rollover effect I want, however I'm unsure how to get it to work. The guide shows how to change the apearance of the object the mouse is currently hovering over, but I'm unsure how to get it to change the appearance of another object on the page as I need (i.e. when I hover over the first black square the orange box changes to say 'portfolio', then when hovering over the second black square the orange box changes to say 'about me' etc.). I'd like to get this working using CSS if possible, as although I'm aware the same can be done using some javascript (although I was also struggling to understand that), CSS seems much more straightforward and a 'cleaner' method to do things. Can anyone help me get this to work. Once I know, I'm sure I can apply the same technique into the gallery portion of the site which shows my portfolio. Thanks again.
You can use the div#idname:hover property to have it change the formatting on hover, however if you're looking for a "toggle" ie hover over it and it stays changed, then you need to use javascript. jQuery has a very very simple "toggle" which just swaps a class onMouseOver or onClick, depending where you place the javascript call, which I use for toggling personally.
I'm with Zoon here, I think jQuery is your best bet. It's easy to use and there are some great tutorials out there for some great effects. You'll be glad you did it.
I also like jQuery. I'm pretty sure Dreamweaver can automatically create the javascript required for you to do this also though. It would be in the tag inspector ad then on the behaviours panel and swop image or something, I can't completely recall...
Can I ask what tutorial you were using for Dreamweaver? I only know the basics for it at the moment, but want to learn the advanced stuff like your likely using here. Have never got anything to look so professional out of Dreamweaver, so well done
Thanks alot for all the replies. I'll give jQuery a try, some of the effects in the tutorial section of their site looked great. @Ljs, that last link you gave looks perfect. I know it's not hard to get the effects working in CSS, but I was struggling to know how to get it to effect another object and not the one the mouse was currently over (as all the tutorials I'd found so far demonstrated). I'll give this a try tonight and let you know if it works. I might then try creating a portfolio gallery using a technique like this. @Sexton. I used this and this tutorial to get me going. I didn't find it too dificult to understand what was going on, and how to substitute my design in there. I found the 'Live View' function on Dreamweaver very useful as I could see how any changes effected things straight away.
No worries... That CSSPlay site I linked you to is excellent for pretty much everything that can be done in CSS, its helped me countless times! There are a plethora of jQuery galleries and sliders on the internet. Not too sure what kind of style you want to implement but these are a couple of my favourites: EasySlider - Demo. Nivo Slider - Demos. They are both pretty easy to use too. *Edit* Ohh, just looked at the slider you linked... Quite nice!
Still haven't got this to work. I can't find anything as simple as this in any jQuery tutorials yet, everything seems to involve movement etc. which will come in handy with the gallery portion of the site, but not for these simple links. Couldn't understand how to implement that CSS tut you linked Ljs. Using CSS I can get the image I'm hovering over to change to a different image easily enough using the class="swap" command. Is there a simple way I'm missing to instead change another image? I simply can't find a tutorial online that shows what I'm after, and I'm getting more and more irritated. Help, please? An example piece of code would be great.
If that design is the same layout as a tutorial make sure the writer of the tut is ok with you using it, I would tell you it looks good, which it does, but all you have done (as far as i know) is follow a list of instructions.
Here's a jquery toggle tutorial (onclick) http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/ To make it toggle on hover find: Code: $("h2.trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); }); Change to: Code: $("h2.trigger").hover(function(){ $(this).toggleClass("active").next().slideToggle("slow"); }); To provide both, COPY the .click section (the whole section) and duplicate it instead of overtyping it. Does this help?
@Syn, no the layout has nothing in common with any tutorials I've been following. Just applying the html and CSS to my own design. @zoon, thanks for that, but I've got something close to working using javascript now (think it's gonna take me a little time to get used to jQuery). This is the code I'm using: In the <head>: Code: <script type="text/javascript"> img1 = new Image(); img1.src = "images/img1.gif"; img2 = new Image(); img2.src = "images/img2.gif"; img3 = new Image(); img3.src = "images/img3.gif"; img4 = new Image(); img4.src = "images/img4.gif"; function change(num){ document.images["linkpic"].src = "images/img" + num + ".gif"; } </script> and this in the <body>: Code: <div id="container1"> <p id="portfolio_picture"><a href="http://www.dylanpugh.co.uk/portfolio/" onmouseover="change('1')" onmouseout="change('4')">Portfolio</a></p> <p id="about_me_picture"><a href="http://www.dylanpugh.co.uk/about_me/" onmouseover="change('2')" onmouseout="change('4')">About Me</a></p> <p id="contact_picture"><a href="#" onmouseover="change('3')" onmouseout="change('4')">Contact</a></p> <p id="writing_change"><img src="images/file.gif" name="linkpic"></p> </div> The CSS for this part is standing at: Code: #container1 { display: block; width: 895.35px; height: 150px; margin-top: 183.19px; margin-left: auto; margin-right: auto; } p#portfolio_picture { display: inline; float: left; width: 150px; height: 150px; background: url(images/portfolio_picture.gif); } p#portfolio_picture a { display: block; width: 150px; height: 150px; text-indent: -5000px; } p#about_me_picture { display: inline; float: left; width: 150px; height: 150px; background: url(images/about_me_picture.gif); margin-left: 1.5px; } p#about_me_picture a { display: block; width: 150px; height: 150px; text-indent: -5000px; } p#contact_picture { display: inline; float: left; width: 150px; height: 150px; background: url(images/contact_picture.png); margin-left: 1.5px; } p#contact_picture a { display: block; width: 150px; height: 150px; text-indent: -5000px; } p#writing_change { display: inline; float: right; width: 442px; height: 151px; } This has got me 90% of the way. However at the moment the area with the orange box (that changes) is blank when the site is first loaded untill I mouseover one of the links. How can I tell it to start with an image? Thanks for the help, it's all much appreciated, and things are getting along slowly + I'm learning heaps Edit: nevermind, figured it out. Needed my 'site info' image saved under file.gif and it displays. Woohoo, that's a completely working homepage. Even loads successfully in IE8 (although you need to allow Active-X for the javascrpt). On to the other pages now.
Personally I would've had hidden DIVs and toggled their view, but roll-over changing the img src works just fine as well! Nice work, glad we could lead you at least in the right direction Remember to link when its done! Its a good looking website.
I agree, hidden DIVs are a more elegant way to do it. None the less, plenty of people change img src so not to worry.
the advantage of using hidden divs would be the precaching without javascript. Changing an image src requires JS precaching.
I'll look into using hidden divs then. This way works, but if there's a better way to do things, then great. Afterall this is a learning excersice aswell. Thanks for the info. The site won't be online for a little while. I'll be hosting the website myself on a spare computer I'll be setting up as a webserver / fileserver / rendering rig. I've got access to Windows Server through MSDNAA that I can use (if autodesk backburner works on Windows Server that is). That won't happen till I get back to uni though.
