Wednesday, July 15, 2009

What is this called in web design regarding a link that opens a text box under it when you click on it?

I want to do a web design project where I am making a library of multimedia material. My idea is that when someone is interested in something on the menu, they can click once on the title and then a little box opens up below it with a description. Within the box along with the description is yet another link where they can click to read the item or play the item (if it is an mp3 or video). Then if they click the main link again the little box closes up and they are free to choose another title. I have seen this before but do not know what it is called. Can you help me? Thank you.

What is this called in web design regarding a link that opens a text box under it when you click on it?
I'm afraid this is not a very easy thing to make. You have to create a layer (in Dreamweaver this is Insert -%26gt; Layout Objects Layer) and then manipulate its visibility property through some JavaScript coding. Below I give an example (hope it works):





Step 1: When you create such a layer, the following code will appear:





%26lt;div id="Layer1"%26gt;%26lt;/div%26gt;





Also, the Layer1 will appear in the Layers panel group. Between starting and ending tags, insert code to look like the following:





%26lt;div id="Layer1"%26gt;This is some text that describes the best possible way the features of what you've just clicked. For more details %26lt;a href="page23.html"%26gt;click here%26lt;/a%26gt;%26lt;/div%26gt;





Step 2: In the head section, insert the following:


%26lt;script type="text/javascript"%26gt;


%26lt;!--


function ShowOrHide(theObj){


var visObj=document.getElementById(theObj)


visObj.style.visibility=(visObj.style.vi...


}


// --%26gt;


%26lt;/script%26gt;





Step 3: In the link you want the user to click to open the layer, put the following attribute:





href="javascript:ShowOrHide('Layer1')"





Work on it a little bit. If this doesn't work, consult my sources.
Reply:You could do this by using flash or Ajax or combining them.





Ajax would be used to show and hide the window without the entire page needing to be refreshed. You could play the media content in the window using flash. Check out istock and see how implement something similar.
Reply:I know what you mean - I did something very similar a while ago.





I used drop down menus (select). Clicking on each selection would send a query to the server and a set of results (hyperlinks) would appear in a separate frame in the same page.The hyperlinks contained the description rather than the URL using standard


%26lt;a href=link%26gt;description%26lt;/a%26gt; . Users could then choose to click on the results (which were hyperlinks) to play embedded videos and any media corresponding to the link which appeared in another frame next to the results pane.





If you are interested , I can edit this post and send you code snippets so you can try it out - it's really not that different to what you want - just select instead of menu - you can modify this no problem, I think.


No comments:

Post a Comment