|
JavaScript - Trying To Find A Example Of When You Hover Over A Image, Text Appears On The Bottom
trying to find a example of when you hover over a image, text appears on the bottom
so it could be a picture of a dog, whne you put your mouse over it, text will show in the picture (ie* transparent background for text so it's readable) anywhre where I can find a example of this???? Similar TutorialsHere is the link: http://sovietgaming.com/misc.php?page=roster We have a roster for Starcraft 2 and when you hover over one of the pictures it displays more info however if you start to scroll and hover you can no longer see it. We need to make so that you can see the hover over no matter where you are on the page. I'm pretty sure the problem is in style #10 of the js code posted below. Code: /* Please refer to readme.html for full Instructions Text[...]=[title,text] Style[...]=[TitleColor,TextColor,TitleBgColor,TextBgColor,TitleBgImag,TextBgImag,TitleTextAlign,TextTextAlign, TitleFontFace, TextFontFace, TipPosition, StickyStyle, TitleFontSize, TextFontSize, Width, Height, BorderSize, PadTextArea, CoordinateX , CoordinateY, TransitionNumber, TransitionDuration, TransparencyLevel ,ShadowType, ShadowColor] */ var FiltersEnabled = 1 // if your not going to use transitions or filters in any of the tips set this to 0 Text[0]=["Forum Username: Soviet_Nova","<li>Best Race: Zerg</li><li>League: Silver</li> <li>Times Online: Afternoons/late night</li> <li>Favorite Custom map: Nexus Wars, Gem TD, Squadron TD, any other T or D really </li> <li>Location: Ft. Collins, Colorado</li>"] Text[1]=["Forum Username: Figgy13","<li>Best Race: Zerg</li><li>League: Gold</li> <li>Times Online: Whenever possible (Wednesday's dedicated to SC2)</li> <li>Favorite custom map: SOTIOS and Risk</li> <li>Location: New Jersey</li>"] Text[2]=["Forum Username: Soviet-Mario","<li>Offrace: meh, i like to offrace as both, but i suppose my toss is better</li><li>Location: New Orleans Louisiana</li> <li>Favorite Gear: Razer Deathadder mouse, banshee headset, marauder keyboard</li> <li>SC1 AKA: Soviet_Mario</li>"] Text[3]=["Forum Username: Cheapliquid","<li>Best Race: Random</li><li>League: Gold</li> <li>Times Online: Randomly all day</li> <li>Favorite Custom map: GEM D</li> <li>Location: The Dirty Jersey</li>"] Text[4]=["Forum Username: Trooper","<li>Best Race: Terran</li><li>League: Master</li> <li>Times Online: Almost every night</li> <li>Favorite Custom map: Nexus Wars</li> <li>Location: Pennsylvania</li>"] Text[5]=["Forum Username: Soviet_Smoke","<li>Best Race: Unknown</li><li>League: Unkown</li> <li>Times Online: Unkown</li> <li>Favorite Custom map: Unkown</li> <li>Location: Unknown</li>"] Text[6]=["Forum Username: MAXPOWER","<li>Best Race: Unknown</li><li>League: Practice</li> <li>Times Online: Never</li> <li>Favorite Custom map: Unknown</li> <li>Location: Southern Colorado</li>"] Text[7]=["Forum Username: Oreo","<li>Best Race: Protoss</li><li>League: High Masters -peaked top 1000's NA</li> <li>Times Online: 3-5, 8-10 weekedays and weekends varies</li> <li>Favorite Custom map: Marine Arena or a MOBA</li> <li>Location: Massachusetts</li>"] Text[8]=["Forum Username: Soviet-cbel","<li>Offrace: Both of my offraces suck, unfortunately</li><li>Stream: None</li> <li>Location: NC</li> <li>Favorite Gear: Logitech/Razer</li> <li>SC1 AKA: None</li>"] Text[9]=["Forum Username: Frosty","<li>Best Race: Random</li><li>League: Diamond</li> <li>Times Online: Medium Activity</li> <li>Favorite Custom map: Squadron/hero attack/zealot frenzy</li> <li>Location: Edmonton, Alberta, Canada</li>"] Text[10]=["Forum Username: Wartourist","<li>Best Race: Terran</li><li>League: Diamond</li> <li>Times Online: Mostly week nights</li> <li>Favorite Custom map: Mafia</li> <li>Location: Montreal, Canada</li>"] Text[11]=["Forum Username: Soviet_Nova","<li>Best Race: Zerg</li><li>League: Silver</li> <li>Times Online: Afternoons/late night</li> <li>Favorite Custom map: Nexus Wars, Gem TD, Squadron TD, any other T or D really </li> <li>Location: Ft. Collins, Colorado</li>"] Text[12]=["Forum Username: Soviet_Hegemon","<li>Best Race: Terran</li><li>League: Silver/Scrub</li> <li>Times Online: Sporadically</li> <li>Favorite Custom map: BattleCraft and Desert Strike</li> <li>Location: Everett,WA</li>"] Text[13]=["Forum Username: Acid","<li>Off Race: Zerg</li> <li>Stream: twitch.tv/sGAcid </li> <li>Location: Upstate New York</li> <li>Favorite Gear: Logitech</li> <li>Location: Upstate New York</li> <li>SC1 AKA: Soviet_Acid</li>"] Text[14]=["Forum Username: Hauskta","<li>Offrace: Terran</li> <li>Stream: http://www.twitch.tv/haustka</li> <li>Location: Tucson, Arizona</li> <li>Favorite Gear: Logitech</li> <li>SC1 AKA: Soviet_Haustka</li>"] Text[15]=["Forum Username: Soviet_Greywolf","<li>Offrace: None</li><li>Stream: None</li> <li>Location: Everett, WA</li> <li>Favorite Gear: Logitech</li> <li>SC1 AKA: Soviet_Greywolf</li>"] Text[16]=["Forum Username: Soviet_Nova","<li>Best Race: Zerg</li><li>League: Silver</li> <li>Times Online: Afternoons/late night</li> <li>Favorite Custom map: Nexus Wars, Gem TD, Squadron TD, any other T or D really </li> <li>Location: Ft. Collins, Colorado</li>"] Text[17]=["Forum Username: MAXPOWER","<li>Best Race: Unknown</li><li>League: Practice</li> <li>Times Online: Never</li> <li>Favorite Custom map: Unknown</li> <li>Location: Southern Colorado</li>"] Text[18]=["Forum Username: Maesy","<li>Best Race: Random</li><li>League: Diamond</li> <li>Times Online: Scattered depending on work schedule</li> <li>Favorite Custom map: Gem TD/Desert Strike equally.</li> <li>Location: Florida</li>"] Text[19]=["Forum Username: PeaceSC2","<li>Best Race: Terran</li><li>League: Masters</li> <li>Times Online: Depends on the day</li> <li>Favorite Custom map: no idea</li> <li>Location: Vancouver BC, Canada</li>"] Text[20]=["Forum Username: Link uK","<li>Best Race: Zerg</li><li>League: Diamond</li> <li>Times Online: Any other day but Wed.</li> <li>Favorite Custom map: Any map made by Darglein or Multitasking trainer.</li> <li>Location:Don't Be a Creep Bro</li>"] Text[21]=["Forum Username: Kenjiman","<li>Best Race: Zerg</li><li>League: Diamond</li> <li>Times Online: Whenever i dont have homework or midterms/finals.</li> <li>Favorite Custom map: Don't really have one..</li> <li>Location: Cal Poly San Luis Obispo</li>"] Text[22]=["Forum Username: DCE_Mason","<li>Best Race: Zerg</li><li>League: Platinum</li> <li>Times Online:After school (4pm-10pm CST)</li> <li>Favorite Custom map: 1v1 Obs Metalopolis Slime</li> <li>Location: Chicago, IL</li>"] Text[23]=["Forum Username: MicroSyntax","<li>Offrace: No! There is no Offrace, there is only one race and it has machineguns and women with long legs. </li><li>Stream: under construction</li> <li>Location: Canoobian</li> <li>Favorite Gear: If it moves or clicks, I like it. </li> <li>SC1 AKA: None</li>"] Text[24]=["Forum Username: TeamSnorlax","<li>Best Race: Protoss</li><li>League: Platinum</li> <li>Times Online: Afternoon / Evening Central</li> <li>Favorite Custom map: N/A</li> <li>Location: Chicago, IL, USA/li>"] Text[25]=["Forum Username: SniperRome","<li>Best Race: Protoss (Random)</li><li>League: High Masters</li> <li>Times Online: Random</li> <li>Favorite Custom map: Starjeweled, Diplomacy</li> <li>Location: Alberta, Canada</li>"] Text[26]=["Forum Username: Swordy","<li>Best Race: Zerg</li><li>League: Diamond</li> <li>Times Online: Frequently</li> <li>Favorite Custom map: MageCraft + RMC</li> <li>Location: Devon, United Kingdom</li>"] Text[27]=["Forum Username: fox","<li>Best Race: Terran</li><li>League: High Masters</li> <li>Times Online: All the time</li> <li>Favorite Custom map: None</li> <li>Location: USA</li>"] Text[28]=["Forum Username: CivilAnarchy","<li>Best Race: Zerg</li><li>League: Master</li> <li>Times Online: Highly active but varied times</li> <li>Favorite Custom map: Phantom Mode</li> <li>Location: Voorhees New Jersey</li>"] Text[29]=["Forum Username: nobodyWondeR","<li>Best Race: Terran</li><li>League: Master</li> <li>Times Online: weekdays 3-5:30pm PST</li> <li>Favorite Custom map: metalopolis, shattered, antiga</li> <li>Location: California</li>"] Text[30]=["Forum Username: steveyy153","<li>Best Race: Protoss</li><li>League: Master</li> <li>Times Online: Weekends and whenever else I have time</li> <li>Favorite Custom map: Civ Sapphire</li> <li>Location: Bloomington, Indiana</li>"] Text[31]=["Forum Username: Nemesis","<li>Best Race: Protoss</li><li>League: Master</li> <li>Times Online: Whenever I can, usually mid evning to early morning</li> <li>Favorite Custom map: None</li> <li>Location: Nova Scotia, Canada</li>"] Text[32]=["Forum Username: Lane_","<li>Best Race: Zerg</li><li>League: Diamond</li> <li>Times Online: Always</li> <li>Favorite Custom map: Star Battle, Risk</li> <li>Location: USAr</li>"] Text[33]=["Forum Username: Defrath","<li>Best Race: Protosss</li><li>League: Diamond</li> <li>Times Online: After 5</li> <li>Favorite Custom map: BW Fall of the Dark Lord, or BW Bunker Wars.e</li> <li>Location: Schenectady, New York.</li>"] Text[34]=["Forum Username: ExO","<li>Best Race: Protoss</li><li>League: Master</li> <li>Times Online: N/A</li> <li>Favorite Custom map: N/A </li> <li>Location: Houston, Texas </li>"] Text[35]=["Forum Username: Haro","<li>Stream: None</li><li>Offrace: Zerg None</li> <li>Location: New York City</li> <li>Favorite Gear: None</li> <li>Sc1 AKA: None</li>"] Text[36]=["Forum Username: ZimZam","<li>Stream: None</li><li>Offrace: Zerg</li> <li>Location: Portland, Oregon</li> <li>Favorite Gear: Rapoo </li> <li>Sc1 AKA: Zimri</li>"] Text[37]=["Forum Username: Voodoo","<li>Stream: None</li><li>Offrace: Was top Dia z, currently playing as low Dia p </li> <li>Location: Tornot, Ontario, Canada </li> <li>Favorite Gear: I use a laptop and a logitech g9x dontlaughatme</li> <li>Sc1 AKA: None</li>"] Text[38]=["Forum Username: daSnake","<li>Stream: None</li><li>Offrace: Toss is all I know</li> <li>Location: what is this? AOL? FL</li> <li>Favorite Gear: Razer all the way</li> <li>Sc1 AKA: Soviet_da5nake good times... I have another one but can't remember</li>"] Text[39]=["Forum Username: SuzumiyauK","<li>Stream: None</li><li>Offrace: None</li> <li>Location: Toronto, Ontario</li> <li>Favorite Gear: Headphone: Bose Mouse: Steelseries Keyboard: Logitech </li> <li>Sc1 AKA: SuzumiyauK, GeneraluK, Mystic_Raptor, FoW_Raptor, NoVa</li>"] Text[40]=["Forum Username: SlamDuncan","<li>Stream: SlamDuncan64 on twitchtv</li><li>Offrace: I play random lol</li> <li>Location: Canada</li> <li>Favorite Gear: Steeleseries and Razer mix</li> <li>Sc1 AKA: None</li>"] Text[41]=["Forum Username: Drpoppler","<li>Stream: justin.tv/drpoppler</li><li>Offrace: Protoss</li> <li>Location: Canada eh?</li> <li>Favorite Gear: Logitech</li> <li>Sc1 AKA: None</li>"] Text[42]=["Forum Username: Crevasse","<li>Stream: None</li><li>Offrace: Protoss</li> <li>Location: CA</li> <li>Favorite Gear: Filco, Steelseries</li> <li>Sc1 AKA: None</li>"] Text[43]=["Forum Username: Dystopian","<li>Stream: http://www.teamliquid.net/video/streams/Dystopian</li><li>Offrace: Terran</li> <li>Location: Arizona</li> <li>Favorite Gear: Logitech</li> <li>Sc1 AKA: None</li>"] Text[44]=["Forum Username: sGstorm","<li>Stream: twitch.tv/jgreen46</li><li>Offrace: Protoss like a boss</li> <li>Location: Vancouver, Canada</li> <li>Favorite Gear: Sentinel Zero-G Mouse. Changeable mouse weight? YES PLZ.</li> <li>Sc1 AKA: hizzlemafizzle, fox not sGFox</li>"] Text[45]=["Forum Username: eFeKZ","<li>Stream: http://www.twitch.tv/eFeKZ</li><li>Offrace: Zerg Top8Masters</li> <li>Location: Currently Costa Rica (Soon Canada again)</li> <li>Favorite Gear: Razer / Steel Series</li> <li>Sc1 AKA: fLow</li>"] Text[46]=["Forum Username: AceGeneral","<li>Stream: None</li><li>Offrace: Oh God No!</li> <li>Location: Corn State of Indiana</li> <li>Favorite Gear: LOL what gear</li> <li>Sc1 AKA: Ace</li>"] Text[47]=["Forum Username: Defrath","<li>Best Race: Protosss</li><li>League: Diamond</li> <li>Times Online: After 5</li> <li>Favorite Custom map: BW Fall of the Dark Lord, or BW Bunker Wars.e</li> <li>Location: Schenectady, New York.</li>"] Text[48]=["Forum Username: Kaiser","<li>Stream: None</li><li>Offrace: I only play Zerg because I have self-respect</li> <li>Location: British Columbia, Canada</li> <li>Favorite Gear: My trusty MX518.</li> <li>Sc1 AKA: None</li>"] Text[49]=["Forum Username: Comedian","<li>Stream: None</li><li>Offrace: all</li> <li>Location: Purdue University</li> <li>Favorite Gear: None</li> <li>Sc1 AKA: None</li>"] Text[50]=["Forum Username: Swordy","<li>Stream: None</li><li>Offrace: None</li> <li>Location: Devon, United Kingdom England</li> <li>Favorite Gear: Logitech</li> <li>Sc1 AKA: MyWifeForAiur, Soviet_Sword</li>"] Text[51]=["Forum Username: Blank","<li>Stream:</li><li>Offrace:</li> <li>Location: </li> <li>Favorite Gear: </li> <li>Sc1 AKA:</li>"] Text[52]=["Forum Username: MAXPOWER","<li>Best Race: Unknown</li><li>League: Practice</li> <li>Times Online: Never</li> <li>Favorite Custom map: Unknown</li> <li>Location: Southern Colorado</li>"] Text[53]=["Forum Username: Acid","<li>Off Race: Zerg</li> <li>Stream: twitch.tv/sGAcid </li> <li>Location: Upstate New York</li> <li>Favorite Gear: Logitech</li> <li>Location: Upstate New York</li> <li>SC1 AKA: Soviet_Acid</li>"] Text[54]=["Forum Username: Soviet-Mario","<li>Offrace: meh, i like to offrace as both, but i suppose my toss is better</li><li>Location: New Orleans Louisiana</li> <li>Favorite Gear: Razer Deathadder mouse, banshee headset, marauder keyboard</li> <li>SC1 AKA: Soviet_Mario</li>"] Style[0]=["white","black","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,10,10,51,1,0,"",""] Style[1]=["white","black","#000099","#E8E8FF","","","","","","","center","","","",200,"",2,2,10,10,"","","","",""] Style[2]=["white","black","#000099","#E8E8FF","","","","","","","left","","","",200,"",2,2,10,10,"","","","",""] Style[3]=["white","black","#000099","#E8E8FF","","","","","","","float","","","",200,"",2,2,10,10,"","","","",""] Style[4]=["white","black","#000099","#E8E8FF","","","","","","","fixed","","","",200,"",2,2,1,1,"","","","",""] Style[5]=["white","black","#000099","#E8E8FF","","","","","","","","sticky","","",200,"",2,2,10,10,"","","","",""] Style[6]=["white","black","#000099","#E8E8FF","","","","","","","","keep","","",200,"",2,2,10,10,"","","","",""] Style[7]=["white","black","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,40,10,"","","","",""] Style[8]=["white","black","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,10,50,"","","","",""] Style[9]=["white","black","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,10,10,51,0.5,75,"simple","gray"] Style[10]=["white","white","#2C2C2C","#2C2C2C","http://soviet.scdiplo.com/images/gamer/nav_sub.png","","center","left","Verdana","Verdana","center","",2,2,300,100,2,20,10,0,50,1,80,"complex","gray"] Style[11]=["white","white","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,10,10,51,0.5,45,"simple","gray"] Style[12]=["white","black","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,10,10,"","","","",""] applyCssFilter() What should be done to fix it? Thank you! Right i need some help with some code, i have been trying 2 days to get it to work! basically the 3 image locations are in Variables in PHP $piclocation1 $piclocation2 $piclocation3 What i want is when you hover over the div class "breaking-news", i want the div ID "latest-news-image" to change to that specific image background. example the top "breaking-news" class is on hover and the image $piclocation1 should show in "latest-news-image". if the middle "breaking-news" class is on hover the image $piclocation2 should show in "latest-news-image". and so on if you could help me figure out a way around to get this to work i would be ever so greatfull, as i dont know if i got this in the right area as it would contain javascript, php and poss Css! and even if you could point me in the right direction would be helpful! this is the website page i am testing it on if you would like to look at if visually http://www.wolverhampton-wanderers.co.uk/text.php and here is the code: Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="Stylesheet" type="text/css" href="./wolves.css"/>
<title>Untitled Document</title>
<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3";
$news = mysql_query($getnews) or die(mysql_error());
$counter = 1;
while($row1 = mysql_fetch_array($news)){
if($counter == 1)
{
$picture1 = $row1['imageID'];
$getimage1 = "SELECT * FROM news_images WHERE imageID = $picture1";
$image1 = mysql_query($getimage1) or die(mysql_error());
$pic1 = mysql_fetch_array($image1);
$piclocation1 = $pic1['imageFile'];
}
if($counter == 2)
{
$picture2 = $row1['imageID'];
$getimage2 = "SELECT * FROM news_images WHERE imageID = $picture2";
$image2 = mysql_query($getimage2) or die(mysql_error());
$pic2 = mysql_fetch_array($image2);
$piclocation2 = $pic2['imageFile'];
}
if($counter == 3)
{
$picture3 = $row1['imageID'];
$getimage3 = "SELECT * FROM news_images WHERE imageID = $picture3";
$image3 = mysql_query($getimage3) or die(mysql_error());
$pic3 = mysql_fetch_array($image3);
$piclocation3 = $pic3['imageFile'];
}
$counter = $counter + 1;
}
?>
</head>
<body>
<div class="shaddow"><!-- This is the shaddow behind the content -->
<div class="content"> <!-- This is the content and main background -->
<div class="header"><img src="../images/header.jpg"/></div>
<div class="menu">
<div id="nav">
<?php
$cat = "SELECT * FROM `top-menu` ORDER BY 'category' ASC";
$category = mysql_query($cat) or die(mysql_error());
$start = 1;
while($row = mysql_fetch_array($category)){
$submenu = $row['sub-menu'];
if($submenu == '1'){
echo "</li><li><a id='{$row['Active-ID']}' " .
"href='{$row['Address']}'>" .
"{$row['Text']}</a>";
}
elseif($submenu == '2'){
if($start == 1){
echo "<ul>";
}
echo "<li><a id='{$row['Active-ID']}' " .
"href='{$row['Address']}'>" .
"{$row['Text']}</a></li>";
$start = $start + 1;
if($submenu !='2'){
echo "</ul></li>";
$start = 1;
}
}
}
echo "</ul></li><a class='nav-end'></a>";
?>
</div>
</div>
<div id="latest-news">
<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3";
$news = mysql_query($getnews) or die(mysql_error());
$counter = 0;
echo "<div id='latest-news-image'></div>" .
"<div id='latest-news-header'>Breaking News</div>";
while($row1 = mysql_fetch_array($news)){
echo "<div class='breaking-news'><div class='breaking-news-header'><a href='#'>{$row1['title']}</a></div>" .
"<div class='breaking-news-info'>Posted on {$row1['date']}, by {$row1['author']}</div>" .
"<div class='breaking-news-desc'>{$row1['desc']}</div>" .
"<div class='breaking-news-readmore'><a href='#'>Read More</a></div></div>";
$counter = $counter + 1;
}
?>
</div>
</div>
</div>
</body>
</html>
Hello, I was wondering if anyone could help me with a personal website I am modifying for a friend. He basically has a list of links such as: Home Blog Pictures Links What I want to do is that whenever you roll over, say, "Blog", an image appears to the right of the links (the image will be a small screenshot of what the blog looks like). When you roll over "Pictures", a different image appears in it's place. I already know how to do this when rolling over images, but not rolling over text. I used document.getElementById and just set the src to the image, but how do I do this when I just have text to roll over? Is it possible/recommended to use the follow JQuery? http://ajax.googleapis.com/ajax/libs.../jquery.min.js Thank you for your time Hello all. I'm sure this is really easy, but I have a question about being able to change a main image depending on a mouseover of particular text. I have a website where I am hosting a recipe, and I want to be able to show a 'main' picture that changes depending on where the user is hovering in the instructions. It would be very similar to this: http://piscesmike.com/Pages/recipes/onions.html The exception being that the top images are replaced by line by line instructions, and the main image changes depending on which instruction you are hovering on. Alternatively, I could also use a pop-up window with the image for the particular instruction, but could not get that to work either. I coded everything for the above link, but just cant seem to get this working. Any help is greatly appreciated. And, also feel free to try out the recipe's from PiscesMike.com, or to poke around. I know there are a few other errors (one being the day of the week deal) so once again, any input or help would be a tremendous help. Thanks and sorry for being such a noob! Hi guys. I'm trying to write a macro, but I'm lost. So say if I have an array of keywords to check for on a web page, Code: var keywords=new Array(); keywords[0]="You are a cat"; keywords[1]="Are you a robot"; keywords[2]="Have a good summer"; How would I make a function that checks the currently opened web page for one of the specific keywords. And if that keyword is found, then execute some action - and if not, then execute some other action? Thanks Hi, I'm using greybox for the first time, and it seems there's something buggy in my javascript. Have a look he http://www.bpope.com/TEST/portfolio/indexTEST.html The links are actually image maps on different areas of the "book." Click on any of the six to bring up a greybox slide show. My problem is the images often don't appear, but if you then navigate past that image and then back, it invariably shows up. I'm not proficient in javascript, but have been around long enough that when a problem as inconsistent as this happens, it's often because of some sort of conflict in code. I've looked for other similar posts and have found none. After banging my head against this for most of the afternoon, I'm hoping someone will see what I'm missing here. Thanks! B Hello all, Essentially what I am trying to get without much success on the issue is this: I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window. This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason. I am obliged for any help on this. *edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though. I am attempting to manipulate a long text string with javascript. This text string may have one or more occurrences of a string which starts with a particular string and ends with another string. So, for example, text that starts with 'nam' and ends with 'sit' in this example: Quote: Lorem ipsum dolor sit amet, consectetur adipiscing elit nam aliquam leo sit amet nibh tincidunt ultricies. Nullam nam feugiat velit sit amet dui scelerisque id ornare nulla ultricies. I want to prepend another string before the nam and append another after the sitt, to give me: Quote: Lorem ipsum dolor sit amet, consectetur adipiscing elit before nam aliquam leo sit after amet nibh tincidunt ultricies. Nullam before nam feugiat velit sit after amet dui scelerisque id ornare nulla ultricies. I think the way to do this is via RegExp, but I'm insufficiently familiar with this to know how to write the expression. Can anyone help me out? So, I'm new to Javascript but really just need the one code. I've tried the tutorials but I have never worked well with those -- I've always found it easier to actually be working with someone. But anyway. Basically, I need something sort of like this -- you click the thumbnail and the image appears in that predetermined spot. One thing, though: the images have to layer over each other. Like, you click image A, and it appears in the spot. You click image B, and it appears on top of image A. It'd be even better if when you clicked Image A it appeared and then you clicked image A again and it disappeared, but I'm going to try to start small. I've gone through the tutorials and have a sort of ish understanding about what some of the parts of the codes do, and I've been told I'm a fast-ish learner, so I think I'll catch the hang of this quick. Thank you! <3 I was using the below code to fade text links in and out on hover. But the problem I'm having is that if you hover over the text a few times quickly the animation will play over and over. Can someone help me add a 'callback'(?) so while the animation is still playing it won't fade in/out again until its finished? Or point me in the direction of a better way of doing this effect. Thanks for reading and I looking forward to your help and responses! Heres the code: Code: $(document).ready(function(){
$(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".thumbs img").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
});
});
http://bowser.effectgames.com/~jhuck.../multiple.html is there a way to add a tipbox when the mouse hover on the copied text by jquery.the tip box say"the text has been copied" thank you. Hi Im playing around with some JQuery and have a small problem with my menu. I want the text to always be visible, be on hover and not on hover. Currently, the text is only visible when I hover the <li> item. Check it out at http://cooper.zxq.net Below is my code using to produce the menu. Code: <html>
<head>
<script src="jquery-1.3.1.min.js" type="text/javascript" ></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('li.image').css({opacity: 0});
$('li.image').hover(function(){
$(this).animate({opacity: 1},400);
}, function(){
$(this).animate({opacity: 0},400);
});
});
</script>
<style>
.ddsmoothmenu{
background-color:Gray;
width: 100%; height:27px;
margin:0 auto;
padding:0;
}
.ddsmoothmenu ul{z-index:1; margin: 0; padding: 0; list-style-type: none;}
.ddsmoothmenu ul li{position: relative; float: left; }
.ddsmoothmenu a{display:block; color: white; border-right: 0px solid #778; color: #2d2b2b; text-decoration: none; font: 11px Verdana; font-weight:bold;}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{color: yellow; z-index:50; line-height:27px;}
.image {
line-height:27px;
height:27px;
background:url(images/button.gif) no-repeat right top;
padding-right:30px;
display:inline-block;
}
.image ins {
background:url(images/button.gif) no-repeat left top;
height:27px;
line-height:27px;
display:inline-block;
padding-left:30px;
}
image:hover {background-position:right -155px;}
image:hover ins {background-position:left -155px;}
</style>
</head>
<div id="smoothmenu1" class="ddsmoothmenu ">
<ul>
<li class="image"><a href="#"><ins>Home</ins></a></li>
<li class="image"><a href="#"><ins>Products</ins></a></li>
<li class="image"><a href="#"><ins>Services</ins></a></li>
<li class="image"><a href="#"><ins>Contact Us</ins></a></li>
</ul>
</div>
</html>
Hope anyone can provide some help Thanks! I have a scrolling div that has overflow set to hidden. I currently have it set up with a script that allows it to click and drag to scroll. However, I need some kind of visual indicator to show that you can scroll (sometimes it isn't obvious). I want to know if there's a way to have an image appear until you scroll to one end of the list or the other (the image can be inside the div, or outside). So in other words, there would be a down arrow at the bottom of the list any time you can scroll down (aka everywhere but the bottom) and an up arrow any time you can scroll up (aka everywhere but the top). Some type of fade out animation would also be nice, but not necessary if it over-complicates things. They would just be images, not functioning buttons. I would greatly appreciate any help. Thank you. I have been at this for days now. THe problem is these scripts dont work well accross all browsers. I like how this script works but it opens a full window. And wont let me add table. http://www.dynamicdrive.com/dynamicindex4/logo_dev.htm But I can not get it to work with a table. The links I want to open a new window without scrolling, sizeable and toolbar. <table border="0" align="right" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td> <a href="unsaved:///Contact Us" onClick="MyWindow=window.open('https://domain.com/contactus.html"><img src="https://domain.com/images.gif" alt="Contact Us" border="0"></a> </td> </tr> <tr> <td> <center> <font face="Arial" size="3" color="#0000FF">call US</font> </a> </center> </td> </tr> <tr> <td> <center></a>or<a href="mailto:sales@domain.com"> Email Us</a> </center> </td> </tr> </table> Please help! Hi all I have a list of items that when you hover over them it displays an image (using CSS). This is fine when the list is small but when the list is large it takes a while to load all the images... this then delays any javascript on the page from running until all the images are loaded. Is there a way to either: * Use javascript to make it so the image only loads when the link is hovered over? or * Allow the rest of the javascript on the page to run before the images are finished loading? I think i'd prefer the first solution if possible but i'm open to all ideas. Thanks in advance! I've been looking around for some time now and can't seem to find anything for what I'd like. I want it to be that when you hover over a segment of text, a box will appear with what in hopes will be more text. And then that box move away if you move your cursor.
On my website http://smstext.jigowatt.co.uk i have a menu which when you hover over certain parts popups with information. I have designed a Mooflow document that I want to popup instead (i will design a different one for each section). I cant get it to show up when you hover? I am trying to add a php link in the javascript file that links the hover images. This is my code at the moment Code: var ddimgtooltip={
tiparray:function(){
var tooltips=[]
//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
tooltips[0]=["http://i1189.photobucket.com/albums/z423/creativeedge1/Golf-Popup1.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[1]=["http://i1189.photobucket.com/albums/z423/creativeedge1/hospitals_popup_copy.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[2]=["../dynamicindex14/winter.jpg"]
tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]
return tooltips //do not remove/change this line
}(),
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
When I am trying to link the php I use this code Code: var ddimgtooltip={
tiparray:function(){
var tooltips=[]
//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
tooltips[0]=[<link href="<?php bloginfo('template_directory'); ?>/index2.php", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[1]=["http://i1189.photobucket.com/albums/z423/creativeedge1/hospitals_popup_copy.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[2]=["../dynamicindex14/winter.jpg"]
tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]
return tooltips //do not remove/change this line
}(),
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
Obviously I am doing something wrong but I'm not sure what!?? Help Please ok I have this image and i want the image to change upon the mouse hovering over it. Which in it self is simple to do and I Google numerous different ways on how to do it. But each one i would be forced to use a <a href... in it. The thing is I don't want to use it cause i am already using HTML image map. I really need help on finding the code that would work... This is what I have Code: <html> <head> </head> <body> <p align="center"><img src="room.bmp" border="1" usemap="#maps" alt="Green room" /></p> <map name="maps"> <area shape="rect" coords="25,210,100,300" href="greenroom.html#energy" > <area shape="rect" coords="130,215,185,277" href="greenroom.html#water"> <area shape="rect" coords="80,11,263,149" href="greenroom.html#tv"> </map> ............. Ok. Basically, I will have images, about 150x100 that are all different. They will be displayed on a page in groups of 4. I want to make it so that if you hover over them, another image of the same size is put on top of that with part alpha. To give you an idea of what I am doing, it will be like youtube videos when you hover over them except I want there to be an image centered. I know this part of the code, but I don't know what to put inside it: Code: $(document).ready(function(){
$("img").mouseenter(function(){
//add image on top of this image
})
$("img").mouseleave(function(){
//remove covering image
})
})
What should I replace the comments with? Thanks Dear all, I have been trying to replicate a cool javascript effect that appears here. See the funky images fading in when hovering with mouse? I want that ;-) By using Firebug I think I have narrowed down the code needed to: Code: <div id="main" class="clearafter">
<div class="inner clearafter">
<div class="columns clearafter">
<div class="project hovers column" style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);">
<a href="http://mountfolly.co.uk" class="image">
<img width="274" height="137" alt="project" src="/images/41_project.jpg" class="screenshot">
<img width="274" height="137" alt="project" src="/images/7_project.jpg" class="text" style="opacity: 0; display: inline;">
</a>
<h3>Text and titles etc...</h3>
<p>etc etc etc...</p>
</div>
<div style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);" class="project hovers column"></div>
</div>
</div>
</div>
<script type="text/javascript" src="/javascript/global.js"></script>
and this (which I put into a javascript file called global.js): Code: /* project listings */
// to deal with IEs opacity idiocy
$(function() {
$('.project.hovers .text').css({opacity: 0}).show();
$('.project.hovers').css({cursor: 'pointer'}).click(function() {
location.href = $('h3 > a', this).attr('href');
});
});
$('.project.hovers').hover(
function () {
$('.text',this).stop().fadeTo('100',1);
$(this).stop().animate({borderTopColor: '#E9E9E9', borderRightColor: '#E9E9E9', borderBottomColor: '#E9E9E9', borderLeftColor: '#E9E9E9', backgroundColor: '#EEE' }, 100)
},
function () {
$('.text',this).stop().fadeTo(1000,0);
$(this).stop().animate({borderTopColor: '#FFF', borderRightColor: '#FFF', borderBottomColor: '#FFF', borderLeftColor: '#FFF', backgroundColor: '#FFF' }, 1000)
}
);
But when I re-create the files (index.html, global.js, and replacement images) all I get is this. No hover effect... Any ideas what is missing? Would appreciate some help. Thanks, Wysiwyger PS: If you fancy a laugh, check these out |
|||||||