Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to make information about a picture appear when clicked on? (Assignment)
New Posts  All Forums:Forum Nav:

How to make information about a picture appear when clicked on? (Assignment)

post #1 of 2
Thread Starter 
So I have an assignment due Tuesday, I've got everything working pretty well apart from this.

Basically the page has 3 pictures (of staff) and when you click on one it's meant to show a drop down menu with their name, what they do etc.

So far I've got this working when you click on images it will alert that you've clicked on it for debug testing.
Code:
window.onload=init;

function init()
{
        document.getElementById("person1").onclick=person1;
        document.getElementById("person2").onclick=person2;
        document.getElementById("person3").onclick=person3;
}

function person1()
{
        alert("Person 1 clicked");
}

function person2()
{
        alert("Person 2 clicked");
}

function person3()
{
        alert("Person 3 clicked");
}

What do i need to do to make it drop down a menu from here?

Thanks,
 
Seven Seven Five
(12 items)
 
NASSY
(5 items)
 
CPUMotherboardGraphicsRAM
Convertible i5 3570k (De-Lidded) Gigabyte Z77x-D3H XFX R9 290 With Koolance Block (1179/1450) 16GB G-Skill Ares 1866 
Hard DriveHard DriveOptical DriveCooling
Samsung 840 Evo Seagate Barracuda 2TB 1x OEM DVD Drives Heatkiller Rev 3.0 
CoolingCoolingCoolingCooling
XSPC RX360 Laing D5 + XSPC Res Primochill Bloodshed Red Tubing Koolance Fullcover R9 290x Block 
CoolingOSMonitorMonitor
XSPC EX360 Windows 10 Pro x64 Asus VEH228H Asus VE228H 
MonitorKeyboardPowerCase
Aavara TS742 Dual Monitor Stand Ducky Shine II Cherry Blue RED Backlit Mechanic... Silverstone Strider 850W Thermaltake Core x71 Tempered Glass Riing Edition 
MouseMouse PadAudioOther
Zowie FK1 House of Stealth Microlab Solo6c Logitech C100 Webcam 
CPUGraphicsRAMHard Drive
Celeron N3160 HD Graphics 400 4GB DDR3 4TB WD Red 
Cooling
Some 120mm fan 
  hide details  
Reply
 
Seven Seven Five
(12 items)
 
NASSY
(5 items)
 
CPUMotherboardGraphicsRAM
Convertible i5 3570k (De-Lidded) Gigabyte Z77x-D3H XFX R9 290 With Koolance Block (1179/1450) 16GB G-Skill Ares 1866 
Hard DriveHard DriveOptical DriveCooling
Samsung 840 Evo Seagate Barracuda 2TB 1x OEM DVD Drives Heatkiller Rev 3.0 
CoolingCoolingCoolingCooling
XSPC RX360 Laing D5 + XSPC Res Primochill Bloodshed Red Tubing Koolance Fullcover R9 290x Block 
CoolingOSMonitorMonitor
XSPC EX360 Windows 10 Pro x64 Asus VEH228H Asus VE228H 
MonitorKeyboardPowerCase
Aavara TS742 Dual Monitor Stand Ducky Shine II Cherry Blue RED Backlit Mechanic... Silverstone Strider 850W Thermaltake Core x71 Tempered Glass Riing Edition 
MouseMouse PadAudioOther
Zowie FK1 House of Stealth Microlab Solo6c Logitech C100 Webcam 
CPUGraphicsRAMHard Drive
Celeron N3160 HD Graphics 400 4GB DDR3 4TB WD Red 
Cooling
Some 120mm fan 
  hide details  
Reply
post #2 of 2
jsfiddle is your friend =P Easier for me to understand what you are doing and to collaborate with.

Also, what do you mean a dropdown menu with their name and info? Wouldn't it just make more sense to popup a form or something like that.

Either way... a couple ways you can do this. You can add a dropdown with all the metadata inside it below the picture... but have it hidden. When the onclick event happens, you can re-enable to picture. If you really wana get tricky with it, you can probably get the position of where you clicked on the picture and have the dropdown reposition itself to that spot and fixed position it over the picture.

As for a popup... same concept as above, but you can have a single function call within each picture. With the function you should do onclick=myFunction(this, {"name":"Bob", "Occupation":"Saucier of Awesomesause"}); (Json is great for large variables.) Within the function, you can get the position of the img or div from the this and have your popup form (not a true popup in a sense) put itself fixed over that location. That or once again...precode it all there and just have it hidden. css display none is amazing. Also reminded me that you can put the json object in the global variable space and then call window["bob"] to access it. SOmeone had asked about doing something like that earlier.
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to make information about a picture appear when clicked on? (Assignment)