Dysan Posted January 1, 2008 Share Posted January 1, 2008 Using JavaScript, is it possible to load different CSS files, upon different images being clicked? Altogether, there will be 4 different text size settings, can the user can select, depending on how big the text needs to be, in order for the user to see correctly. Upon each image being clicked, how do I load a different style sheet (CSS File)? Quote Link to comment Share on other sites More sharing options...
AndyB Posted January 1, 2008 Share Posted January 1, 2008 How about http://www.sitepoint.com/article/css-simple-style-switcher Quote Link to comment Share on other sites More sharing options...
Dysan Posted January 1, 2008 Author Share Posted January 1, 2008 How do I make this script, without the cookie? - Can you give me an example to work on? Quote Link to comment Share on other sites More sharing options...
AndyB Posted January 1, 2008 Share Posted January 1, 2008 If you google 'style switcher' you'll find all kinds of example scripts. Find one you like and modify to suit. If you don't want to use cookies, try php sessions. If you use neither, the text size switch will only last for the page being viewed. A better alternative might be to use percentage size fonts and let the user control their choice of font size using the bulit-in browser options. Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted January 1, 2008 Share Posted January 1, 2008 If you google 'style switcher' you'll find all kinds of example scripts. Find one you like and modify to suit. If you don't want to use cookies, try php sessions. If you use neither, the text size switch will only last for the page being viewed. A better alternative might be to use percentage size fonts and let the user control their choice of font size using the bulit-in browser options. AndyB is right; the end user will have to keep reseting their preferred font size, if you do not use cookies/sessions. He is also right about using a percentage; instead of four completely different style sheet just to change the font size. Do It Like This (No Cookies or Sessions Involved): <script language="javascript"> function setFont(setSize) { document.getElementsByTagName('body')[0].style.fontSize = setSize; } </script> </head> <body> <img src="small.jpg" onclick="setFont('75%')"> <img src="normal.jpg" onclick="setFont('100%')"> <img src="large.jpg" onclick="setFont('125%')"> <img src="xlarge.jpg" onclick="setFont('150%')"> <br><br> Content Here Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.