WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Pop out thing on Sun May 02, 2010 10:00 pm

Krazy


Registered Member
Registered Member
http://europe.monsterenergy.com/product/energy.php

On that page, roll over the thing saying "Roll Over To View Facts". My question is, how do I make something like that.

2 Re: Pop out thing on Sun May 02, 2010 10:01 pm

Sanket

avatar
Administrator
Administrator
Thats a flash file.

http://www.webartzforum.com

3 Re: Pop out thing on Sun May 02, 2010 10:02 pm

Krazy


Registered Member
Registered Member
Yes, I know that. How do I make something similar to that though.

4 Re: Pop out thing on Mon May 03, 2010 12:16 am

Kratos

avatar
Registered Member
Registered Member
it can be done with css3, I have made something like this before...I ll have to look for it and then i ll post it over here

5 Re: Pop out thing on Mon May 03, 2010 1:34 am

Emilio

avatar
Registered Member
Registered Member
Photoshop, just build it up with glow

http://www.graphilicious.forumotion.Com

6 Re: Pop out thing on Mon May 03, 2010 4:13 am

Krazy


Registered Member
Registered Member
Okay Kratos. Samurai, I do not need the image, I need to make that whole thing itself.

7 Re: Pop out thing on Tue May 04, 2010 2:02 pm

ankillien

avatar
Administrator
Administrator
Hello!

Here is a JavaScript that works similar to it...
Please carefully read the parts which are in Italic style.

<!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->

<a href="#" onMouseover="showit(0)">Web</a> |
<a href="#" onMouseover="showit(1)">Artz</a> |
<a href="#" onMouseover="showit(2)">Forum</a>

<!-- Edit the dimensions of the below, plus background color-->
<ilayer width=400 height=32 name="dep1" bgColor="#E6E6FF">
<layer name="dep2" width=400 height=32></layer></ilayer>

<div id="describe" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>

<script language="JavaScript1.2">

/*
Tabs Menu (mouseover)- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use
*/


var submenu=new Array()

//Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.

submenu[0]=
'<a href="#">HTML</a> | <a href="#">XHTML</a> | <a href="#">CSS</a> | <a href="#">JavaScript</a> | <a href="#">PHP</a> | <a href="#">MySQL</a>'

submenu[1]=
'<a href="#">Krazy</a> | <a href="#">Fred100</a> | <a href="#">Sanket</a> | <a href="#">Kratos</a>'

submenu[2]=
'<a href="#">News</a> | <a href="#">Introduction</a> | <a href="#">Suggestions</a>'

//Set delay before submenu disappears after mouse moves out of it (in milliseconds)
var delay_hide=100

/////No need to edit beyond here

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
menuobj.innerHTML=thecontent
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1)",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1)",delay_hide)
}

function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

</script>

8 Re: Pop out thing on Wed May 05, 2010 11:49 am

Krazy


Registered Member
Registered Member
Thanks, though I want the one with the facts. Its on the center right of that page. Wink

9 Re: Pop out thing on Wed May 05, 2010 12:53 pm

ankillien

avatar
Administrator
Administrator
You can put anything there. Just remove links and put facts if you want Razz

This is what you need to edit...

Code:
submenu[0]=
'CONTENT TO SHOW UP 1'

submenu[1]=
'CONTENT TO SHOW UP 2'

submenu[2]=
'CONTENT TO SHOW UP 3'

10 Re: Pop out thing on Mon May 10, 2010 2:39 am

Krazy


Registered Member
Registered Member
No, I will take a screen shot and post it below of what I mean on that page.

Here it is:

11 Re: Pop out thing on Tue May 11, 2010 8:31 pm

Krazy


Registered Member
Registered Member

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum